0

私はこの少ないコードを持っています:

colors : 1 #F00, 2 #0F0, 3 #00F, 4 #F0F;

.for(@colors); .-each(@values) {
    @position: extract(@values, 1);
    @color: extract(@values, 2);

    &.raster-@{position} {
        background-image: linear-gradient(#000000, @color);
    }
}

https://github.com/seven-phases-max/less.curious/blob/master/src/for.lessの for mixin を使用しています

生成されたコードは次のとおりです。

.bg-1 {
  background-color: #ff0000 !important;
  color: extract(1 #ff0000, 3);
}
.bg-2 {
  background-color: #00ff00 !important;
  color: extract(2 #00ff00, 3);
}
.bg-3 {
  background-color: #0000ff !important;
  color: extract(3 #0000ff, 3);
}
.bg-4 {
  background-color: #ff00ff !important;
  color: extract(4 #ff00ff, 3);
}

問題が見つかりました。.for() を使用して .bg-xx クラスを生成します。

@bgColors : red red yellow, blue blue white;

.for(@bgColors); .-each(@values) {
    @name: extract(@values, 1);
    @bgColor: extract(@values, 2);
    @color: extract(@values, 3);

    &.bg-@{name} {
        background-color: @bgColor !important;
        color: @color;
    }
}

このコードの問題点は何ですか?

4

1 に答える 1

2

if-wrapper (mixin) または mixin で「トリック」を使用する代わりに、http: //lesscss.org/features/#loops-featureで説明されているように、mixins ガードを使用してループを作成することも検討できます。

例えば：

@bgColors: red red yellow, blue blue white;

.backgrounds(@colors; @iterator: 1) {

    @name: extract(extract(@colors, @iterator), 1);
    @bgColor: extract(extract(@colors, @iterator), 2);
    @color: extract(extract(@colors, @iterator), 3);

    &.bg-@{name} {
        background-color: @bgColor !important;
        color: @color;
    }

   & when (@iterator < length(@colors)) {
     .backgrounds(@colors; @iterator + 1);
   }
}
.backgrounds(@bgColors);

次の CSS コードにコンパイルされます。

.bg-red {
  background-color: red !important;
  color: yellow;
}
.bg-blue {
  background-color: blue !important;
  color: white;
}
于 2015-03-29T20:51:34.530 に答える