如何将 Sass 函数转换为 Less?
How to Convert Sass Function to Less?
有谁知道如何在 Less 中重新创建下面的 Sass 函数?我希望能够轻松转换任何 CSS 属性 内的单位(例如:字体大小、边距、填充等)。
Sass:
@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/
更新答案:
作为 ,他创建了一个很棒的自定义 Less 插件,允许我们在 Less 中编写函数(是的,具有 return 值)并在规则中使用它们。
要使用这个插件,我们必须先通过执行以下命令安装插件:
npm install -g less-plugin-functions
下一步是为我们编写自定义函数。这样做的语法是首先将函数包装在名为 .function {}
的 mixin/selector 块中,然后只需复制粘贴我在原始答案中给出的混合代码(见下文)。唯一的变化是 @output
变量必须替换为 return
,因为函数 return 是分配给此 属性 的值。因此,代码将如下所示:
.function{
.get-vw(@target) {
@vw-context: (1440 * 0.01) * 1px;
return: (@target / @vw-context) * 1vw; /* do calc, set output to "return" property */
}
}
创建函数后,用法非常straight-forward,就像我们在 Sass:
中所做的一样
.selector {
font-size: get-vw(20px);
margin-top: get-vw(16px);
}
现在,下一步是编译 Less 文件以生成输出 CSS。命令行编译是使用相同的 lessc
命令完成的,但我们必须在执行它时 include/invoke 自定义插件。所以编译语句如下所示:
lessc --functions test.less test.css
所有这些信息都已在 GitHub Page 中提供,但为了完整性和安全起见,我在答案中再次记录了它们。
注意: 如果在自定义函数中没有指定return
属性 则在编译过程中会抛出以下错误:
RuntimeError: error evaluating function get-vw
:
[plugin-functions] can't deduce return value, either no mixin matches or return statement is missing in [file name]
原答案:
首先,无法在 Less 中编写真正的函数,因为 return 语句是不可能的.
我们可以做的一件事是编写一个 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 在 中描述的那样。它 很复杂 但这是唯一正确的方法。
有谁知道如何在 Less 中重新创建下面的 Sass 函数?我希望能够轻松转换任何 CSS 属性 内的单位(例如:字体大小、边距、填充等)。
Sass:
@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/
更新答案:
作为
要使用这个插件,我们必须先通过执行以下命令安装插件:
npm install -g less-plugin-functions
下一步是为我们编写自定义函数。这样做的语法是首先将函数包装在名为 .function {}
的 mixin/selector 块中,然后只需复制粘贴我在原始答案中给出的混合代码(见下文)。唯一的变化是 @output
变量必须替换为 return
,因为函数 return 是分配给此 属性 的值。因此,代码将如下所示:
.function{
.get-vw(@target) {
@vw-context: (1440 * 0.01) * 1px;
return: (@target / @vw-context) * 1vw; /* do calc, set output to "return" property */
}
}
创建函数后,用法非常straight-forward,就像我们在 Sass:
中所做的一样.selector {
font-size: get-vw(20px);
margin-top: get-vw(16px);
}
现在,下一步是编译 Less 文件以生成输出 CSS。命令行编译是使用相同的 lessc
命令完成的,但我们必须在执行它时 include/invoke 自定义插件。所以编译语句如下所示:
lessc --functions test.less test.css
所有这些信息都已在 GitHub Page 中提供,但为了完整性和安全起见,我在答案中再次记录了它们。
注意: 如果在自定义函数中没有指定return
属性 则在编译过程中会抛出以下错误:
RuntimeError: error evaluating function
get-vw
:[plugin-functions] can't deduce return value, either no mixin matches or return statement is missing in [file name]
原答案:
首先,无法在 Less 中编写真正的函数,因为 return 语句是不可能的.
我们可以做的一件事是编写一个 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 在