使用较少的混合输入多次设置变量，但得到错误的结果

Question

在前线，我今天开始的时候.

因此，任何建议，如何做得更好是受欢迎的！

我有以下.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;
}

我期望填充底部和边缘底部得到值1.875和最大宽度: 20。

但这就是输出：

.custom-field {
  position: relative;
  padding-bottom: 1.875em;
  margin-bottom: 1.875em;
  max-width: 1.875em;
}

在开始时，我将第二个参数作为可选参数。但是为了测试，我使它尽可能简单。

如果我更频繁地使用混音，我会得到更多奇怪的结果。至少对我来说，它们很奇怪:)

有人给我建议吗？

Answer 1

较少的变量“惰性负载”，这意味着它们在代码中出现的顺序并不重要，通常获胜的是“最后”调用。在您的例子中，我发现奇怪的是，我希望它们都是20em，因为这是值的“最后”设置。但是，我从发布这个“问题”中了解到，具体原因是它是由一个混合器调用的，所以它是唯一设置的第一个值。由于延迟加载，它可能会影响调用变量的整个作用域，而且由于mixin只会设置一次值，无论调用多少次，您最终都会出现“奇怪”的行为。

你至少有四种方法可以处理你的情况，这将输出你想要的东西。

(1)在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);
}

(2)设置全局Javascript函数

注意到这是如何构造/使用的。，在你对SASS的评论之后，我从这条线那里得到了这个想法。这样就可以设置各种功能。

@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)`;
}

(3)模式匹配的非Javascript解决方案。

注意到它是如何构造/使用的。这是更“冗长”的，但是避免调用javascript环境(如果需要的话，或者如果它们有时删除内联javascript功能[在网站上的各种问题中已经讨论过])，并提供一些良好的灵活性。这样也可以设置各种功能(如图所示)。

/*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;
}

(4)使用嵌套块或Mixins

我从这句话学到了另一种方法，它也以不同的方式解决了这个问题。

.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之前的任何版本中产生多个选择器块，就像这样(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;
}

因此，如果使用早期版本，最好将其保留为本地混合器：

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