有谁知道如何在Less中重建下面的Sass功能?我希望能够轻松转换任何CSS属性中的单位(例如:font-size,margin,padding等)。
萨斯:
@function get-vw($target) {
$vw-context: (1440 * 0.01) * 1px;
@return ($target / $vw-context) * 1vw;
}
CSS:
selector {
font-size: get-vw(20px)vw;
}
Sass来自这里:http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/
更新答案:
作为seven-phases-max has mentioned in comments below,他创建了一个很棒的自定义Less插件,它允许我们用Less编写函数(是的,带有返回值)并在规则中使用它们。
为了让我们使用这个插件,我们必须首先通过执行以下命令来安装插件:
npm install -g less-plugin-functions
下一步是我们编写自定义函数。这样做的语法首先将函数包装在名为.function {}
的mixin / selector块中,然后只复制粘贴我在原始答案中给出的mixin代码(见下文)。唯一的变化是@output
变量必须替换为return
,因为该函数返回分配给此属性的值。因此,代码将如下所示:
.function{
.get-vw(@target) {
@vw-context: (1440 * 0.01) * 1px;
return: (@target / @vw-context) * 1vw; /* do calc, set output to "return" property */
}
}
创建函数后,使用非常简单,就像我们在Sass中所做的那样:
.selector {
font-size: get-vw(20px);
margin-top: get-vw(16px);
}
现在,下一步是编译Less文件以生成输出CSS。命令行编译使用相同的lessc
命令完成,但我们必须在执行时包含/调用自定义插件。所以编译语句如下所示:
lessc --functions test.less test.css
所有这些信息都已在GitHub Page中提供,但为了完整性和安全起见,我在答案中再次记录了这些信息。
注意:如果在自定义函数中未指定return
属性,则在编译期间将抛出以下错误:
RuntimeError:错误评估函数
get-vw
:[plugin-functions]无法推断返回值,或者[file name]中没有mixin匹配或者return语句丢失
原答案:
首先,没有办法在Less中编写一个真正的函数,因为返回语句是不可能的。
我们可以做的一件事就是编写一个mixin并破解我的方式,让它的行为与函数的行为有点接近。以下是一个例子:
.get-vw(@target) { /* take an input */
@vw-context: (1440 * 0.01) * 1px;
@output: (@target / @vw-context) * 1vw; /* do calc, set an output var */
}
.parent {
.get-vw(20px); /* expose output var + value to current scope by calling mixin */
font-size: @output; /* use the value of output var wherever needed */
.child { /* scoping is not a problem as you can see with the child */
.get-vw(16px);
padding: @output;
}
}
但上面代码片段的问题在于,如果两个属性需要使用此函数的输出,并且每个属性都有不同的输入值,则由于在Less中延迟加载变量而存在问题。例如,请考虑以下代码段(.get-vw
mixin与早期代码段保持一致。)
.parent {
.get-vw(20px);
font-size: @output;
.get-vw(16px);
margin-top: @output;
}
您可能希望输出如下:
.parent {
font-size: 1.38888889vw;
margin-top: 1.11111111vw;
}
但实际输出是这样的:(如你所见,同样的值适用于两者)
.parent {
font-size: 1.38888889vw;
margin-top: 1.38888889vw;
}
解决方案是变得更加hacky并将每个这样的属性放在一个未命名的命名空间(&
)中,从而为每个属性提供自己的范围:
.parent {
& {
.get-vw(20px);
font-size: @output;
}
& {
.get-vw(16px);
margin-top: @output;
}
}
正如你所看到的,它变得非常混乱。在Less中编写真实函数的唯一方法是编写一个自定义插件,就像Bass Jobsen在his answer here中描述的那样。这很复杂,但这是唯一真实的方式。