Css 如何将Sass函数转换为Less？

有人知道如何在更少的时间内重新创建下面的Sass函数吗？我希望能够轻松地转换任何CSS属性内的单位（例如：字体大小、边距、填充等）

Sass:

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

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

CSS:

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

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

---

Sass来自这里：

更新答案：

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

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

他创建了一个很棒的自定义Less插件，它允许我们用Less编写函数（是的，带有返回值），并在规则中使用它们

要使用此插件，我们必须首先通过执行以下命令安装插件：

npm install -g less-plugin-functions

下一步是编写自定义函数。执行此操作的语法是首先将函数包装在名为

.function{}

的mixin/选择器块中，然后复制粘贴我在原始答案中给出的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 */
  }
}

lessc --functions test.less test.css

.parent {
  font-size: 1.38888889vw;
  margin-top: 1.11111111vw;
}

创建函数后，用法非常简单，就像我们在Sass中所做的那样：

.selector {
  font-size: get-vw(20px);
  margin-top: get-vw(16px);
}

现在，下一步是编译Less文件以生成输出CSS。命令行编译是使用相同的

lessc

命令完成的，但我们必须在编译时包含/调用自定义插件。因此，编译语句如下所示：

.function{
  .get-vw(@target) {
    @vw-context: (1440 * 0.01) * 1px;
    return: (@target / @vw-context) * 1vw; /* do calc, set output to "return" property */
  }
}

lessc --functions test.less test.css

.parent {
  font-size: 1.38888889vw;
  margin-top: 1.11111111vw;
}

所有这些信息都已在中提供，但为了完整性和安全起见，我在回答中再次记录了它们

注意：如果在自定义函数中未指定任何

return

属性，则编译过程中将抛出以下错误：

RuntimeError：错误评估函数

获取vw

：

[插件函数]无法推断返回值，[文件名]中没有mixin匹配项或返回语句缺失

---

原始答案：

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

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

首先，由于不可能使用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;
    }
}

但是上面代码段的问题是，如果两个属性需要使用此函数的输出，并且每个属性都有不同的输入值，那么就会出现问题，因为在较少的时间内延迟加载变量。例如，考虑下面的代码段（<代码>。 您可能希望输出如下所示：

.function{
  .get-vw(@target) {
    @vw-context: (1440 * 0.01) * 1px;
    return: (@target / @vw-context) * 1vw; /* do calc, set output to "return" property */
  }
}

lessc --functions test.less test.css

.parent {
  font-size: 1.38888889vw;
  margin-top: 1.11111111vw;
}

但实际输出是这样的：（如您所见，相同的值应用于两者）

解决方案是变得更加粗糙，将每个这样的属性放在一个未命名的名称空间（

&

）中，从而为每个属性赋予自己的范围：

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

---

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

“后处理器/功能插件”->“功能”。这简直太棒了@seven-phases-max。刚刚安装并试用，它太棒了。在我看来少了什么。我会给你一个100喜欢只是为了那个插件！即使在你给了我链接之后，我也只看到了Sass2Less插件，并没有看到这个插件。我马上就要编辑我的答案了。函数功能一直计划作为本机功能添加—但关于它的确切语法（仍然没有达成一致意见，因此是插件）。@seven Phase max:再次感谢这一出色的添加。我真的很喜欢它。我现在已经编辑了答案，如果您发现任何错误（或需要更正），如果您有时间，请随时编辑我的答案：）@Harry我实际上提出了一个类似的解决方案，它的通用性稍高，尽管@seven Phase max提到的插件似乎最终是最好的答案。我的解决方案是调用值为1的mixin:

.get vw（1）

然后将返回值乘以我想要的大小：

font size:@output*20或
页边距顶部：@output*16这有助于避免多次调用mixin和创建单独的作用域。然而，这仍然不理想。我要试试这个插件！