7

LESS CSS では、別の mixin の呼び出しで、または別の mixin の既定値として名前空間変数を使用できますか? 通常の構文を使用すると、そうではないように見えますが、探している効果を達成するために使用できるエスケープシーケンスまたはその他の構文はありますか?

次のようなコードを考えています。

#namespace {
    @nsColor: #333;
}

.testMixin1(@mixinColor) {
    background-color: @mixinColor;
}

.selector { .testMixin1(#namespace > @nsColor); }

または、代わりに...

.testMixin2(@anotherMixinColor: #myNamespace > @myColor) {
    background-color: @anotherMixinColor;
}

そうでない場合、名前空間の有用性が大幅に制限されます。これは、変数をオブジェクト スコープに配置できるが、グローバル スコープの変数をパラメーターとして関数に渡すことしかできないようなものです。基本的に、これは名前空間の有用性の 90% を排除するように見えます。

4

1 に答える 1

7

新しい回答: Guard Expression Check を使用して Mixin を拡張する

私が理解しているように、名前空間をデフォルト値として使用できるようにしたいのですが、グローバルスコープにはまったく入りません。次のように mixin 定義を拡張する必要があると思います。

#namespace {
    @nsColor: #333;
}


.testMixin1(@mixinColor: 'null') {
    .mixin (@a) when (iscolor(@a)) {
       background-color: @a;
    }
    .mixin (@a) when not (iscolor(@a)) {
       #namespace;
       background-color: @nsColor;
    }
    .mixin (@mixinColor);
}

次に、値なしまたは値付きで呼び出します。

.testMixin1();
.testMixin1(red);

出力 (値を設定するかどうかに基づく):

background-color: #333333;
background-color: #ff0000;

また

最初に述べたように、名前空間で「ゲッター」ミックスインを引き続き使用できます。

#namespace {
    .getNsColor(){@nsColor: #333;} <-- changed here
}  

.testMixin1(@mixinColor: 'null') {
    .mixin (@a) when (iscolor(@a)) {
       background-color: @a;
    }
    .mixin (@a) when not (iscolor(@a)) {
       #namespace > .getNsColor();  <-- changed here
       background-color: @nsColor;
    }
    .mixin (@mixinColor);
}

元の回答: 変数を Mixin 自体にバンドルする

変数を mixin 自体にバンドルすると、変数にアクセスできます。そう...

#namespace {
    .getNsColor() {@nsColor: #333;}
}

.testMixin1(@mixinColor) {
    background-color: @mixinColor;
}

次に、それを含めます...

1:グローバルに

#namespace > .getNsColor;
.selector { 
  .testMixin1(@nsColor); 
}

または 2:ローカル

.selector { 
  #namespace > .getNsColor;
  .testMixin1(@nsColor); 
}

どちらも出力されます...

.selector {
  background-color: #333333;
}
于 2012-10-28T19:27:20.800 に答える