在前面，我今天开始少了......
所以欢迎任何有关如何做得更好的建议！
我有以下.less文件：
.test(@target;@context) {
@em: (@target / @context) * 1em;
}
.custom-field {
position: relative;
.test(30;16);
padding-bottom: @em;
.test(30;16);
margin-bottom: @em;
.test(320;16);
max-width: @em;
}
我希望padding-bottom和margin-bottom的值为1.875，max-width：20。
但那就是输出：
.custom-field {
position: relative;
padding-bottom: 1.875em;
margin-bottom: 1.875em;
max-width: 1.875em;
}
我在开始时将第二个参数作为可选参数。但是为了测试我尽可能简单。
如果我更频繁地使用mixin，我会得到更多奇怪的结果。至少对我来说他们很奇怪：）
有人给我建议吗？
答案 0 :(得分：3)
LESS variables "lazy load"，这意味着它们在代码中出现的顺序并不重要，它通常是获胜的“最后”调用。在我的案例中，我发现奇怪的是，我希望它们都是20em，因为这是值的“最后”设置。但是，我从发布this "issue"中了解到，这是因为它是由mixin调用的，它只是第一个设置的值。由于延迟加载，它可以影响调用变量的整个范围，并且因为mixin只会设置一次值，无论调用多少次，你最终得到的结果似乎是“奇怪的”行为。
您至少有四种方法可以处理您的情况，这将输出您想要的内容。
.test(@target;@context;@prop) {
@{prop}: (@target / @context) * 1em;
}
.custom-field {
position: relative;
.test(30;16;padding-bottom);
.test(30;16;margin-bottom);
.test(320;16;max-width);
}
仔细注意这是如何构建/使用的。在您对SASS发表评论之后，我从this thread得到了这个想法。可以通过这种方式设置各种功能。
@setEm: `setEm = function(target,context) { return ((target/context)+'em'); }`;
.custom-field {
position: relative;
padding-bottom: ~`setEm(30,16)`;
margin-bottom: ~`setEm(30,16)`;
max-width: ~`setEm(320,16)`;
}
仔细注意如何构造/使用它。这更加“冗长”，但确实避免了对javascript环境的调用（如果需要，或者他们有时会删除内联javascript功能） [which has been discussed during various issues on the site]）并提供一些良好的灵活性。此外，还可以设置各种功能（如图所示）。
/*make a global setter for local variable getter (this will get up to six
/*values from the same caller function to avoid variable overlap; should you
/*need more within a single scope block, just expand this).
*/
.setGetInstance(@num) {
.-(@num);
.-(1) { @getVar1: @setVar;}
.-(2) { @getVar2: @setVar;}
.-(3) { @getVar3: @setVar;}
.-(4) { @getVar4: @setVar;}
.-(5) { @getVar5: @setVar;}
.-(6) { @getVar6: @setVar;}
}
/*Create various "function" mixins that use the global setter */
.setEm(@target;@context;@num) {
@setVar: ((@target / @context) * 1em);
.setGetInstance(@num);
}
.-100(@target;@num) {
@setVar: (@target - 100px);
.setGetInstance(@num);
}
/*Use the function mixins (up to six per block in this example) */
.custom-field1 {
position: relative;
.setEm(30;16;1;);
padding-bottom: @getVar1;
.setEm(30;16;2);
margin-bottom: @getVar2;
.setEm(320;16;3);
max-width: @getVar3;
}
.custom-field2 {
.setEm(20;10;1;);
padding-bottom: @getVar1;
.setEm(10;10;2);
margin-bottom: @getVar2;
.minus100(1000;3);
max-width: @getVar3;
}
CSS输出
.custom-field1 {
position: relative;
padding-bottom: 1.875em;
margin-bottom: 1.875em;
max-width: 20em;
}
.custom-field2 {
padding-bottom: 2em;
margin-bottom: 1em;
max-width: 900px;
}
我从this comment学到了另一种方法，它也以不同的方式解决了这个问题。
.setEm(@target;@context) {
@em: ((@target / @context) * 1em);
}
.custom-field {
position: relative;
& {padding-bottom: @em; .setEm(30;16);}
& {margin-bottom: @em; .setEm(30;16);}
& {max-width: @em; .setEm(320;16);}
}
然而，这将在1.6.2之前的任何版本的LESS中产生多个选择器块，就像这样（1.6.2+合并它们，参见七阶段-max的评论）：
.custom-field {
position: relative;
}
.custom-field {
padding-bottom: 1.875em;
}
.custom-field {
margin-bottom: 1.875em;
}
.custom-field {
max-width: 20em;
}
因此，如果使用早期版本，最好将其保留为本地mixin：
.custom-field {
position: relative;
.-() {padding-bottom: @em; .setEm(30;16);}
.-() {margin-bottom: @em; .setEm(30;16);}
.-() {max-width: @em; .setEm(320;16);}
.-()
}
将所有内容分组：
.custom-field {
position: relative;
padding-bottom: 1.875em;
margin-bottom: 1.875em;
max-width: 20em;
}