68

background-colorさまざまdivな要素を制御するための、ある種のifステートメントを探しています。

以下を試しましたが、コンパイルされません

@debug: true;

header {
  background-color: (yellow) when (@debug = true);
  #title {
      background-color: (orange) when (@debug = true);
  }
}

article {
  background-color: (red) when (@debug = true);
}
4

4 に答える 4

128

個々の（または複数の）属性にガードを使用する方法があります。

@debug: true;

header {
    /* guard for attribute */
    & when (@debug = true) {
        background-color: yellow;
    }
    /* guard for nested class */
    #title when (@debug = true) {
        background-color: orange;
    }
}

/* guard for class */
article when (@debug = true) {
    background-color: red;
}

/* and when debug is off: */
article when not (@debug = true) {
    background-color: green;
}

...そして1.7未満で; コンパイル先：

header {
    background-color: yellow;
}
header #title {
    background-color: orange;
}
article {
    background-color: red;
}
于 2014-05-19T00:16:03.597 に答える
55

LESSには、個々の属性ではなく、ミックスインのガード式があります。

したがって、次のようなミックスインを作成します。

.debug(@debug) when (@debug = true) {
    header {
      background-color: yellow;
      #title {
          background-color: orange;
      }
    }

    article {
      background-color: red;
    }
}

.debug(true);そして、またはを呼び出す（または.debug(false)まったく呼び出さない）ことによって、オンまたはオフにします。

于 2013-02-16T23:44:34.953 に答える
23

私は同じ質問に出くわし、解決策を見つけました。

まず、少なくともLESS1.6にアップグレードするようにしてください。その場合に使用できますnpm。

これで、次のミックスインを使用できます。

.if (@condition, @property, @value) when (@condition = true){
     @{property}: @value;
 }

LESS 1.6以降、PropertyNamesをMixinに渡すこともできます。したがって、たとえば、次のように使用できます。

.myHeadline {
   .if(@include-lineHeight,  line-height, '35px');
}

@ include-lineheightがtrueに解決されると、LESSはをline-height: 35px出力し、@ include-lineheightがtrueでない場合は、ミックスインをスキップします。

于 2014-03-20T17:42:33.603 に答える
9

私はいくつかのシンタックスシュガーのミックスインを書きました;）たぶん誰かがガード
を使うよりもif-then-elseのこの書き方が好きかもしれません

Less1.7.0に依存

https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

使用法：

.if(isnumber(2), {
    .-then(){
        log {
            isnumber: true;
        }
    }
    .-else(){
        log {
            isnumber: false;
        }
    }
});

.if(lightness(#fff) gt (20% * 2), {
    .-then(){
        log {
            is-light: true;
        }
    }
});

上から例を使用して

.if(@debug, {
    .-then(){
        header {
            background-color: yellow;
            #title {
                background-color: orange;
            }
        }
        article {
            background-color: red;
        }
    }
});
于 2014-04-05T14:43:20.883 に答える