variables - 从单独的 mixin 访问 less 变量

Question

基本上我想从 mixin 访问变量 @b 以在其他地方使用。我试图做的一个例子如下，但这不起作用:

.mixin (@x:@x, @y:@y, @z:@z) {
       @b: (@x + @y) / @z; 
}

.item (@x:@x, @y:@y, @z:@z) {
       .mixin (@x, @y, @z);
       margin-left: @b;
 }

.item2 (@x:@x, @y:@y, @z:@z) {
       .mixin (@x, @y, @z);
       margin-right: @b;
}

如有任何帮助，我们将不胜感激，并提前致谢。

杰森

Answer 1

显然，这里的主要问题是变量范围。基于another answer of mine ，在某些情况下，您可以在 mixin 中设置变量并使其在该 mixin 之外可用，但正如该答案所示，LESS 中的一个明显错误阻止通过传递其他变量来设置该变量(这就是您在这里需要的) )。注意:据说该错误已修复，因此也许最新下载的 LESS 编译器可以解决您的问题；我确实知道我通常测试的在线编译器仍然不允许这种类型的变量设置。

因此，这里是另一个建议的替代方案:在 .mixin 中创建您需要的嵌套参数混合，这使得 @b 完全可访问。

所以这个更少

@x: 3;
@y: 3;
@z: 2;

.mixin (@x:@x, @y:@y, @z:@z, @bProp: null) {
       //all your other mixin code

       @b: (@x + @y) / @z;

       //set up pattern matching for props
       //that need @b

       .prop(null) {} //default none
       .prop(ml) {
          margin-left: @b;
       }
       .prop(mr) {
          margin-right: @b;
       }
       //call the property
       .prop(@bProp);
}

.item (@x:@x, @y:@y, @z:@z) {
       //this is a pure default of .mixin()
       .mixin (@x, @y, @z); 
 }

.item1 (@x:@x, @y:@y, @z:@z) {
       //this is set up to call the margin-left pattern
       .mixin (@x, @y, @z, ml);
 }

.item2 (@x:@x, @y:@y, @z:@z) {
       //this is set up to call the margin-right pattern
       .mixin (@x, @y, @z, mr);
}

.item(); 
.item1(); 
.item2(6,6,3);

生成这个CSS(显然它实际上会在选择器内部使用，但我认为你明白了)。

//note that nothing is produced for .item() because it
//defaults to no extra properties other than the base .mixin()
margin-left: 3;
margin-right: 4;