如何将Sass函数转换为更少? [英] How to Convert Sass Function to Less?

问题描述

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

Does anyone know how to recreate the below Sass function in Less? I want to be able to easily convert units within any CSS property (e.g.: font-size, margin, padding, etc).

ass:

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

CSS:

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

Sass在这里:推荐答案

更新后的答案:

由于 seven-phases-max在下面的评论中已提及，他创建了一个很棒的自定义Less插件，该插件使我们可以用Less(是，带有返回值)编写函数并在规则内使用它们.

As seven-phases-max has mentioned in comments below, he has created an awesome custom Less plugin which allows us to write functions in Less (yes, with return value) and use them within the rules.

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

For us to make use of this plugin, we must first install the plugin by executing the below command:

npm install -g less-plugin-functions

下一步是我们编写一个自定义函数.执行此操作的语法是，首先将函数包装在名为.function {}的mixin/选择器块中，然后仅复制并粘贴我在原始答案中给出的mixin代码(请参见下文).唯一的变化是，必须将@output变量替换为return，因为该函数将返回分配给该属性的值.因此，代码将如下所示:

The next step is for us to write a custom function. The syntax for doing this is first to wrap the function within a mixin/selector block named .function {} and then just copy paste the mixin code that I had given in my original answer (see below). The only change is that @output variable must be replaced with return because the function returns the value that is assigned to this property. So, the code will look like the following:

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

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

Once the function is created, usage is very straight-forward and is just like what we do in Sass:

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

现在，下一步是编译Less文件以生成输出CSS.命令行编译是使用相同的lessc命令完成的，但是在执行此操作时，我们必须包含/调用自定义插件.因此，编译语句如下所示:

Now, the next step is to compile the Less file to produce the output CSS. Command line compilation is done using the same lessc command but we have to include/invoke the custom plugin while doing it. So the compilation statement would look like the following:

lessc --functions test.less test.css

所有这些信息已在> GitHub"中提供Page ，但是出于完整性和安全的考虑，我在答案中再次记录了它们.

All these information are already available in the GitHub Page but I've documented them again in the answer for completeness and safety sake.

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

Note: If no return property is specified within the custom function then the following error would be thrown during compilation:

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

[plugin-functions]无法推断出返回值，或者[file name]中没有mixin匹配项或return语句丢失

[plugin-functions] can't deduce return value, either no mixin matches or return statement is missing in [file name]

---

原始答案:

首先，由于无法使用 return 语句，因此无法在Less中编写真实的函数.

First thing first, there is no way to write a true function in Less as return statements are not possible.

我们可以做的一件事是编写一个mixin并破解我们的方法，使其与函数的功能有点相似.下面是一个示例:

One thing we can do is write a mixin and hack our way around to get it behaving a little close to how a function would. Below is an example:

.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与以前的代码段相同.)

But the problem with the above snippet is that if two properties need to use the output of this function and each of them have a different input value then there is trouble because of lazy loading of variables in Less. For example, consider the below snippet (.get-vw mixin remains same as earlier snippet.)

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

您可能期望输出如下:

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

，但实际输出是这样的:(您可以看到，两个值都应用相同的值)

but the actual output would be this: (as you can see, same value is applied to both)

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

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

The solution would be to get even more hacky and put each such property in an unnamed namespace (&) and thereby give each one their own scope:

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

如您所见，这一切都变得 非常混乱 .在Less中编写真正函数的唯一方法是编写一个自定义插件，例如Bass Jobsen在

As you can see it all gets very very messy. The only way to write a true function in Less would be to write a custom plugin like the one that Bass Jobsen has described in his answer here. It is complex but that's the only true way.

这篇关于如何将Sass函数转换为更少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！