4

基本上我想从 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;
}

任何帮助将不胜感激，并提前感谢您。

杰森

4

1 回答 1

2

显然，您的主要问题是变量范围。根据我的另一个答案，在某些情况下，您可以在 mixin 中设置一个变量并使其在该 mixin 之外可用，但正如该答案所示，LESS 中的一个明显错误会阻止通过传入其他变量来设置该变量（这就是你需要的）。注意：据说该错误已修复，因此 LESS 编译器的最新下载可能会解决您的问题；我知道我通常测试的在线编译器仍然不允许这种类型的变量设置。

所以这是另一个建议的替代方案：在你的内部创建你需要的嵌套参数混合，.mixin它可以@b完全访问。

所以这个LESS

@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;
于 2012-12-31T02:53:22.730 回答