- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何检查一个数字是否没有单位?必须有比以下更短的方法:
.margin(@i) when (isnumber(@i)) and not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) {
...
}
我认为 如果不是 (isunit(@i))
会成功,但这是行不通的...
我的目标是使用默认单位并尽可能使用“.font-size(10)”等无单位函数。仅当值没有单位时才应使用默认单位,如果它有像“.font-size(2em)”这样的单位,则该值保持其单位。当默认单位为“rem”或以rem为单位时,该函数必须在rem属性前加上一个像素值(旧浏览器)并计算rem值:
".font-size(5)"应该输出:(当@default-unit: rem 时)
font-size: 5px;
font-size: 0.5em;
我已经完全使用了以下功能:
.font-size(@i) when (isunit(@i,rem)) {
font-size: unit(@i*10,px);
font-size: @i;
}
.font-size(@i) when (ispixel(@i)), (ispercentage(@i)), (isem(@i)), (@i = auto) and not (isunit(@i,rem)) and not (@i = n) {
font-size: @i;
}
.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and (@unit = rem) and not (@i = n) {
font-size: unit(@i,px);
font-size: unit(@i/10,rem);
}
.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and not (@unit = rem) and not (@i = n) {
font-size: unit(@i,px);
}
对于我想要实现的目标来说,这似乎有点过分了......这可以更短吗?
编辑:Scotts 的答案正是我一直在寻找的,现在当我不想使用像“.margin(5,10,0,8px)”这样的 4 个值时,我调用所需的 4 个函数:.margin-top()、.margin-right()、...” 这可以正常工作,但渲染的 css 很长……我想知道什么是渲染的最佳方式css 简写:“margin: 0.5rem,1rem,0,8px;”。使用 Scotts 函数,我尝试为 2 个值制作示例:
.background-position(@x,@y) {
.runChecksx() when not (isnumber(@x)) {
@baseOutputx: @x;
}
.runChecksx() when (isnumber(@x)) {
@tempbaseOutputx: (@x * unit(1, @unit));
@passedRemx: isunit(@x, 'rem');
.checkRemx() when not (isunit(@tempbaseOutputx, 'rem')) and not (@passedRemx) {
@baseOutputx: (@x * unit(1, @unit));
}
.checkRemx() when (isunit(@tempbaseOutputx, 'rem')), (@passedRemx) {
@remBaseAdjx: unit(`(('@{unit}' == 'rem' & @{passedRemx} == true) ? 1 : 0.1)`);
@baseOutputx: unit((@x * @remBaseAdjx), rem);
}
.checkRemx();
}
.runChecksy() when not (isnumber(@y)) {
@baseOutputy: @y;
}
.runChecksy() when (isnumber(@y)) {
@tempbaseOutputy: (@y * unit(1, @unit));
@passedRemy: isunit(@y, 'rem');
.checkRemy() when not (isunit(@tempbaseOutputy, 'rem')) and not (@passedRemy) {
@baseOutputy: (@y * unit(1, @unit));
}
.checkRemy() when (isunit(@tempbaseOutputy, 'rem')), (@passedRemy) {
@remBaseAdjy: unit(`(('@{unit}' == 'rem' & @{passedRemy} == true) ? 1 : 0.1)`);
@baseOutputy: unit((@y * @remBaseAdjy), rem);
}
.checkRemy();
}
.runChecksx();
.runChecksy();
.checkFallback() when (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
background-position: @baseOutputx*10px @baseOutputy*10px;
}
.checkFallback() when (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) {
background-position: @baseOutputx*10px @baseOutputy;
}
.checkFallback() when not (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
background-position: @baseOutputx @baseOutputy*10px;
}
.checkFallback() when not (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) { }
.checkFallback();
background-position: @baseOutputx @baseOutputy;
}
使用 4 个值会使这个函数变得非常小,有什么更好的方法吗?
最佳答案
这可能在未来能够减少一些,但肯定有一个关于 rem
值的错误需要在当前(1.4.1)版本的 LESS 中解决。仍然有一些代码,但所有内容都包含在初始混合调用中。
LESS(默认单位为 rem
的测试用例)
@defaultUnit: rem;
.setFontSize(@i) {
.runChecks() when not (isnumber(@i)) {
@baseOutput: @i;
}
.runChecks() when (isnumber(@i)) {
@tempBaseOutput: (@i * unit(1, @defaultUnit));
@passedRem: isunit(@i, 'rem'); //a bug with rem required this extra step
.checkRem() when not (isunit(@tempBaseOutput, 'rem')) and not (@passedRem) {
//keeps passed in non-rem unit or sets to default when non rem
@baseOutput: (@i * unit(1, @defaultUnit));
}
.checkRem() when (isunit(@tempBaseOutput, 'rem')), (@passedRem) {
//keeps passed in rem unit and value
//or sets to a default rem unit but uses passed value for px value
@remBaseAdj: unit(`(('@{defaultUnit}' == 'rem' & @{passedRem} == true) ? 1 : 0.1)`);
@baseOutput: unit((@i * @remBaseAdj), rem);
font-size: unit(@i, px) * (10 * @remBaseAdj);
}
.checkRem();
}
.runChecks();
font-size: @baseOutput;
}
.test1 {
.setFontSize(5);
}
.test2 {
.setFontSize(5rem);
}
.test3 {
.setFontSize(5px);
}
.test4 {
.setFontSize(5%);
}
.test5 {
.setFontSize(5em);
}
.test6 {
.setFontSize(inherit);
}
CSS 输出
.test1 { /* i.e. unitless 5 with rem default unit */
font-size: 5px;
font-size: 0.5rem;
}
.test2 { /* i.e. passed in rem value */
font-size: 50px;
font-size: 5rem;
}
.test3 {
font-size: 5px;
}
.test4 {
font-size: 5%;
}
.test5 {
font-size: 5em;
}
.test6 { /* any string */
font-size: inherit;
}
关于javascript - Lesscss - 当数字没有单位时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17783454/
我正在使用 dotless 在运行时解析 LessCss。这基本上是成功的,但我遇到了一种情况,它没有按预期工作。 给定以下 LessCss: @tileWidth: 50px; @tileMargi
我在 java 项目中使用两个包时发生冲突 - apache fop 和 lesscss。我找出了错误的原因 - less 编译器使用 context.setLanguageVersion(Conte
我有两个文件:黑色.less /* imports */ @import "elements.less"; @import "crush.less"; @import "tree.less"; 我通过
我有这个 html 代码: t1 t2 这是1.less: .transition { -ms-transition: a
我正在尝试在我的 TinyMCE 编辑器样式表中为 EPiServer CMS 项目实现自定义 CSS 属性。 根据 EPiServer SDK,为了将自定义样式添加到 TinyMCE 样式下拉列表中
与 LessCSS需要在加载页面之前执行 JS,甚至在依赖大量流量的网站上使用这个库是个好主意吗?这似乎是执行 JS 的初始解析时间的一个坏主意,就像 CSS 在 JS 文件下载之前无法正确显示...
我正在开发一个使用 LessCSS 生成样式表的网站。由于我的同事对 Ant 任务(Ant + Rhino + Less)或 NodeJS 知之甚少,我建立了一个可以在 CSS 和 LessCSS 之
如何检查一个数字是否没有单位?必须有比以下更短的方法: .margin(@i) when (isnumber(@i)) and not (ispixel(@i)) and not (ispercent
如果变量不等于 null,我将尝试为 div 添加字体系列。我的 less 代码是 div.content { & when (isstring(@contentFont)) { font
我有以下纯 CSS 规则: #cboxOverlay{ background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filte
我确信这很简单,但我无法让它发挥作用。本质上,我正在构建一个风格指南,以使与设计师/开发人员的合作更容易一些。我想要完成的是这个, 我有一个装满 block 的托盘,其背景颜色由 LESS 使用 mi
我需要我的 LESS 文件来编译以下过滤器: filter: url("data:image/svg+xml;utf8,#grayscale"); 我似乎无法找出正确的语法来转义它,因为 LESS 正
我已经定义了: .box-shadow (@params) { -webkit-box-shadow : @params; -moz-box-shadow : @params;
我有以下代码,我将 main 用作扩展函数 .clear-left { > li:first-child { border-left:none; margin-
你好, 希望你能帮上忙。 有没有办法让 LESS 只返回一个值 - 感觉我遗漏了一些非常明显的东西 假设我有: @unit:em; @basevalue:1; 我可以用一些东西给我速记返回吗- .so
我通过以下方式在 JS 模式 (less.js) 中使用 Less: 在一些页面浏览之后,它停止处理样式并提供一个“缓存”版本。为了让它重新解析样式,我必须清除浏览器 cookie。有谁知道这是为
我正在使用带有较少过滤器的 Assets 并将主要较少的文件存储在 app/Resources/... 我想从包中导入其他较少的样式表到该文件中。 一切正常,但路径让我发疯。 我的 base.less
我最近刚刚进入 LessCSS,我遇到了我认为的主要限制,我想知道是否有办法做到这一点?我想说我在某个地方读到过 Sass 允许用户定义的函数,但 LessCSS 也会这样做吗? 我想要做什么: @f
嗨,我正在尝试在 Mac 上安装 LessCss 命令行编译器。 我已经尝试过 brew install less Error: No available formula for less brew
我在使用插件时遇到问题。一切似乎都很好,但在开发环境中运行应用程序后,页面加载但提示找不到编译的 css 文件。我正在使用 Grails 2.0.1 和 lesscss-resources 1.3.0
我是一名优秀的程序员,十分优秀!