4

変数とガードを使用してifステートメントのような動作を作成するためのより良い解決策があるかどうか（または私の解決策が正しいかどうか）は疑問に思います。

ゴール：

  • variable が true に設定されている場合、コードをコンパイルします (動作します)。
  • 変数が他の値に設定されている場合、コードを無視します (デフォルト、動作します)。
  • 最初のコード位置を保持します (機能しません。呼び出されたときにマージさ.responsive (@responsive);れます)

私のコード:

@responsive: true;

.responsive(true){
  a {
    color: red;
  }
}

.responsive(true) {
  b {
    color: blue;
  }
}

.responsive (@responsive);
4

2 に答える 2

5

あなたの言うことがうまくいかないことを完全に理解しているとは言えません。

しかし、私がそうするなら...これに関連して、LESSで心に留めておかなければならないことが2つあります。

  • スコープは重要です-順序ではありません（同じスコープまたはアクセス可能なスコープで定義する限り、呼び出した後に変数/ミックスインを定義できます）
  • ミックスインは、定義した場所ではなく、呼び出した場所でレンダリングされます

つまり、複数の場所で同じガードを使用してさまざまなことをしたい場合は、複数の mixin を定義する必要があります (各場所は別の mixin を取得します)。定義した場所にレンダリングする場合は、定義した直後 (またはその前) に呼び出す必要があります。このようなもの：

@responsive: true;

test1 {
  color:green;
}

.a() when (@responsive){
  a {
    color: red;
  }
}
.a;

test2 {
  color:green;
}


.b() when (@responsive) {
  b {
    color: blue;
  }
}
.b;

出力は次のようになります。

test1 {
  color: green;
}
a {
  color: red;
}
test2 {
  color: green;
}
b {
  color: blue;
}

したがって、 が に設定されている場合はmixin.a()と.b()が返され、そうでない場合は次のようになります。@responsivetrue

test1 {
  color: green;
}
test2 {
  color: green;
}

これがあなたが望んでいたものであることを願っています。

于 2013-05-27T20:42:02.657 に答える