4

基本的に、他の場所で使用するために、ミックスインから変数@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

明らかに、ここでの主な問題は可変スコープです。私の別の答えに基づいて、ミックスインに変数を設定してそのミックスインの外で使用できる場合がありますが、その答えが示すように、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;
于 2012-12-31T02:53:22.730 に答える