3

色を循環し、scss ファイルのコード量を圧縮するループを作成しようとしています。ここに私が持っているものの簡単な例があります:

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

.color1-bg { background-color: $color1; }
.color2-bg { background-color: $color2; }

.color1-border { border-color: $color1; }
.color2-border { border-color: $color2; }

等々。

変数を使用してクラスを生成するときに、値ではなく変数の名前を持つようにループを作成する方法を探しています。

@each $color in $colour1, $colour2, $colour3, $colour4 {
    .#{$color}-bg { background-color: $color; }
    .#{$color}-border { border-color: $color; }
}
4

4 に答える 4

10

変数の名前に直接アクセスすることはできません。追加の値として保存する必要があります。

Sass 3.2以前（リストのリスト）

Sassにはまだマッピングがないので、次善の策はリストのリストです。

$color1: ('color1', blue);
$color2: ('color2', red);
$color3: ('color3', white);
$color4: ('color4', black);

@each $color in $color1, $color2, $color3, $color4 {
    $name: nth($color, 1);
    $value: nth($color, 2);
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}

Sass 3.3以降（マッピング）

3.3以降、マッピングにアクセスできるようになりました。機能的にはリストのリストと同じですが、構文的にはより簡潔です。

$colors:
    ( 'color1': blue
    , 'color2': red
    , 'color3': white
    , 'color4': black
    );

@each $name, $value in $colors {
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}

代わりに

または、色の名前が実際に「color1」、「color2」などの場合は、明示的に指定するのではなく、その場で名前を作成することもできます。

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

$num: 0;
@each $color in ($color1, $color2, $color3, $color4) {
    $num: $num + 1;
    .color#{$num}-bg { background-color: $color; }
    .color#{$num}-border { border-color: $color; }
}
于 2012-10-11T17:52:48.023 に答える
3

ええ、これはopからかなりの時間ですが、とにかく追加すると思いました:)

これは、最小限の繰り返しで探しているものです。$eric-holmes-colors 配列に新しい色を追加して再コンパイルするだけです。

$eric-holmes-colors: "blue", "red", "white", "black";

@each $color in $eric-holmes-colors {
    .#{$color}-bg {
        background-color: #{$color};
    }
    .#{$color}-border {
        border-color: #{$color};
    }
}
于 2014-01-27T16:25:51.383 に答える
1

これは、以前の回答に対するコメントです。両方の答えを組み合わせることができ、かなり洗練されたコードになります (私の控えめな意見ではありません)。

私はオランダ語の色名を使用していますが、HTML の色名を扱っていないことを明確にするために意図的に使用しています。

$rood      : #e3004a;
$blauw     : #009ee0;

@each $color in ('rood', $rood), ('blauw', $blauw) {

    $name: nth($color, 1);
    $value: nth($color, 2);

    .#{$name} {
        a{
            background-color: $value;
        }                   
    }
}

CSS

.rood a { background-color: #e3004a; }

.blauw a { background-color: #009ee0; }
于 2013-12-11T08:54:23.130 に答える
0

sass-reference によると、コードは次のようになりますが、自分で試したことはありません。

@each $color in $color1, $color2, $color3, $color4 {
  .#{$color}-bg { background-color: $color;}
  .#{$color}-border { border-color: $color;}
}

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives

于 2012-10-11T16:20:49.110 に答える