如何将Sass函数转换为Less

Question

有人知道如何在Less中重新创建下面的Sass函数吗？我希望能够轻松地转换任何CSS属性中的单位(例如：字体大小、边距、填充等)。

萨斯：

@function get-vw($target) {
$vw-context: (1440 * 0.01) * 1px;
@return ($target / $vw-context) * 1vw;
}

CSS:

selector {
font-size: get-vw(20px)vw;
}

萨斯就是从这里来的：http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/

Answer 1

更新的答案：

正如max在下面的评论中提到的七个阶段，他创建了一个很棒的自定义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页面中提供，但为了完整性和安全性，我在答案中再次记录了它们。

注意：如果在自定义函数中未指定return属性，则在编译过程中将引发以下错误：

RuntimeError:错误评估函数get-vw:

[插件函数]无法推导返回值，要么没有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-vwmixin与前面的代码段保持相同。)

.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;
}

解决方案是变得更加棘手，将每个这样的属性放在一个未命名的命名空间(&)中，从而为每个属性赋予自己的作用域：

.parent {
& {
.get-vw(20px);
font-size: @output;
}
& {
.get-vw(16px);
margin-top: @output;
}
}

正如你所看到的，一切都变得非常非常混乱。在Less中编写真正函数的唯一方法是编写一个自定义插件，就像Bass Jobsen在这里的回答中描述的那样。它很复杂，但这是唯一正确的方法。