在mixins中使用未定义数量的参数 [英] Using undefined number of arguments in mixins
问题描述
我现在在我的Less CSS表中有 -webkit 特定的属性，我试图更新他们与 mixins 添加 -moz 属性，如下所示：
.transition 1）{
-webkit-transition：@ 1;
-moz-transition：@ 1;
}
div {
.transition（all .5s）;
}
上面的例子工作正常，但我也有这样的东西： p>
div {
-webkit- transition：border-color .3s，background .3s;
}
我不能调用 mixin .transition（border-color .3s，background .3s） code>。所以我现在做的是这样：
.transition（@ 1）{
-webkit- transition ：@ 1;
-moz-transition：@ 1;
}
.transition-2（@ 1，@ 2）{
-webkit-transition：@ 1，@ 2;
-moz-transition：@ 1，@ 2;
}
div {
.transition-2（border-color .3s，background .3s）;
}
这很烦人，我需要在我的工作表中添加冗余代码'm使用以前没有使用过的许多参数;我也有这个问题与其他CSS3属性，例如 box-shadow 当我需要添加 inset
有任何方法来声明 mixins 在Less的参数数量上灵活，就像CSS3属性是
对于这种情况，可以使用下面提到的任何一个选项避免冗余的混合代码。 >
选项1：（最简单的解决方案 - 由于七阶段最大为突出显示错过）
冒号作为参数的分隔符/分隔符，当我们在指定需要转换的所有属性（以逗号分隔格式）后在结尾处添加分号时，其前面的整个部分将被视为一个参数。 / p>
从官方Less网站：
使用逗号作为mixin分隔符，逗号分隔列表作为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则假定参数用分号分隔，并且所有逗号都属于css列表。
.transition（@ 1）{
-webkit-transition：@ 1;
-moz-transition：@ 1;
}
div {
.transition（border-color .5s，background .3s，color .3s;）;
}
因此，上述代码在编译时会导致
div {
-webkit-transition：border-color 0.5s，background 0.3s，color 0.3s;
-moz-transition：border-color 0.5s，background 0.3s，color 0.3s;
}
选项2 ：
将引号中的输入值传递给mixin（有多少特定的属性需要转换）。在mixin中，使用〜或 e（）内置函数去除引号。
.transition（@ 1）{
-webkit-transition：〜@ {1};
-moz-transition：〜@ {1};
}
div {
.transition（border-color .5s，background .3s）;
}
div＃sample2 {
.transition（border-color .3s，background .3s，color .3s）;
}
将在编译时生成以下CSS
div {
-webkit-transition：border-color .5s，background .3s;
-moz-transition：border-color .5s，background .3s;
}
div＃sample2 {
-webkit-transition：border-color .3s，background .3s，color .3s;
-moz-transition：border-color .3s，background .3s，color .3s;
}
选项3
Less允许创建mixins，允许/接受使用 ... 选项。因此，您可以使用与原始代码中相同的mixin，方法是将 ... 添加到输入变量中，并按原来的方式调用它。
.transition（@args ...）{
-webkit-transition：@args;
-moz-transition：@args;
}
div {
.transition（border-color .5s，background .3s）;
}
上面的编译成功，但唯一的问题是，输出时编译。正如你可以看到的，问题是参数值是空格分隔的，而不是逗号分隔（因为它们应该为CSS正常工作）。
div {
-webkit-transition：border-color 0.5s background 0.3s;
-moz-transition：border-color 0.5s background 0.3s;
}
当然，我们可以写复杂 replace 使用正则表达式的函数，但这将真正使代码凌乱。相反，我们可以使用循环和一些内置函数来实现所需的输出（如下所示）。
.transition args ...）{
.loop-args（@argCount）when（@argCount> 0）{
.loop-args（@argCount - 1）;
@arg：extract（@args，@argCount）;
-webkit-transition +：@arg;
-moz-transition +：@arg;
}
.loop-args（length（@args））;
}
div {
.transition（border-color .5s，background .3s，color .3s）;
}
基本上我们所做的是使用 .. 。接受多个参数作为mixin的输入，然后循环遍历每个参数并将其添加到CSS属性的值。 +： （合并
在编译时，它将产生以下输出：
（在Less v1.5.0中引入的函数）用于生成逗号分隔的输出。
div {
-webkit-transition：border-color 0.5s，background 0.3s，color 0.3s;
-moz-transition：border-color 0.5s，background 0.3s，color 0.3s;
}
I currently have -webkit specific attributes in my Less CSS sheet, I am trying to update them with mixins to add -moz attributes, like this:
.transition(@1) {
-webkit-transition: @1;
-moz-transition: @1;
}
div {
.transition(all .5s);
}
The example above works fine, however I also have things like that:
div {
-webkit-transition: border-color .3s, background .3s;
}
And I can’t call the mixin as .transition(border-color .3s, background .3s) because it has more arguments than defined in the mixin. So what I am doing at the moment is this:
.transition(@1) {
-webkit-transition: @1;
-moz-transition: @1;
}
.transition-2(@1, @2) {
-webkit-transition: @1, @2;
-moz-transition: @1, @2;
}
div {
.transition-2(border-color .3s, background .3s);
}
This is annoying, I need to add redundant code in my sheet any time I’m using a number of arguments not previously used before; and I have this problem with others CSS3 properties too, for example box-shadow when I need to add inset at the beginning.
Is there any way to declare mixins flexible in their number of arguments with Less, just like CSS3 properties are?
For this case, the redundant mixin code can be avoided using any one of the below mentioned options.
Option 1: (Simplest solution - thanks to seven-phases-max for highlighting the miss)
We can use semi-colon as a separator/delimiter for arguments and when we add a semi-colon at the end after specifying all properties that need to be transitioned (in a comma separated format), the whole part before it would be considered as one single argument.
Extract from the official Less website:
Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists
.transition(@1) {
-webkit-transition: @1;
-moz-transition: @1;
}
div{
.transition(border-color .5s, background .3s, color .3s;);
}
So the above code when compiled would result in
div {
-webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
-moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}
Option 2:
Pass the input values to the mixin (how many ever specific properties need to be transitioned) within quotes. Within the mixin, use the ~ or the e() in-built functions to strip the quotes.
.transition(@1) {
-webkit-transition: ~"@{1}";
-moz-transition: ~"@{1}";
}
div {
.transition("border-color .5s, background .3s");
}
div#sample2 {
.transition("border-color .3s, background .3s, color .3s");
}
will produce the below CSS when compiled
div {
-webkit-transition: border-color .5s, background .3s;
-moz-transition: border-color .5s, background .3s;
}
div#sample2 {
-webkit-transition: border-color .3s, background .3s, color .3s;
-moz-transition: border-color .3s, background .3s, color .3s;
}
Option 3:
Less does allow creation of mixins which allow/accept variable number of inputs using the ... option. Hence you can use the same mixin as in your original code by adding the ... to the input variable and calling it as you had originally wanted.
.transition(@args...) {
-webkit-transition: @args;
-moz-transition: @args;
}
div {
.transition(border-color .5s, background .3s);
}
The above will compile successfully but the only problem is that it would produce the below output when compiled. As you can see, the problem is that the parameter values are space separated and not comma separated (as they should be for the CSS to work properly).
div {
-webkit-transition: border-color 0.5s background 0.3s;
-moz-transition: border-color 0.5s background 0.3s;
}
Ofcourse we could write complex replace functions using regular expressions but that would really make the code messy. Instead we could use loops and some built-in functions to achieve the required output (like shown below).
.transition(@args...) {
.loop-args(@argCount) when (@argCount > 0) {
.loop-args(@argCount - 1);
@arg: extract(@args, @argCount);
-webkit-transition+: @arg;
-moz-transition+: @arg;
}
.loop-args(length(@args));
}
div {
.transition(border-color .5s, background .3s, color .3s);
}
Basically what we are doing is use the ... to accept multiple arguments as input to the mixin and then loop over each argument and add it to the CSS property's value. The +: (merge function introduced in Less v1.5.0) is used to produce the comma separated output.
When compiled, it would produce the below output:
div {
-webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
-moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}
这篇关于在mixins中使用未定义数量的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
