サスが、私は私が仕事をしたい色の変数を設定している変数

Question

のリスト上の機能をプリフォーム言う：

$navy:   #001F3F; 
$blue:   #0074D9; 
$aqua:   #7FDBFF; 
$teal:   #39CCCC; 

は私が下記行ったように、リストを定義する方法はありますし、そのリスト内のすべての変数に対して関数を使用します。

$colors: 
    ($navy)($blue)($aqua)($teal); 

e.e.e.一度にすべての色を暗くし、それらを新しいリストの中に入れてください。

$colors-dark: 
    @each $color in $colors { 
    $#{$color}-dark: darken($color, 10); 
    }; 

と私は私がbackgoundオプションとして、各色のサブクラスを持っている場合がありますボタン、つまり要素を持っている時はいつでも、私はその後、ことができるようになります。

@each $color in $colors-dark { 
    .btn.#{$color} { 
    backgound-color:$color; 
    } 
} 

は、このようなAだろうすべての色を一度に1つずつ暗くするのではなく、時間を節約してください。

申し訳ありません私の質問があまり書かれていない場合、私はちょうど何年もの単純なCSSの後で悲鳴を上げるようになりました。

よろしくお願いいたします。

Answer 1

リストを定義することはできません@eachまたは新しいリスト/変数nameを補間で作成することはできません。

あなたはcan補間付きマップvaluesを作成し、希望する結果を得ます。

DEMO

// Put your colors in a map. 
$colors: (
    navy: #001F3F, 
    blue: #0074D9, 
    aqua: #7FDBFF, 
    teal: #39CCCC 
); 

// Create some empty global maps 
$colors-dark:(); 
$colors-light:(); 

@each $key, $color in $colors { 
    // Make new maps for each iteration 
    $dark: (#{$key}-dark: darken($color, 10%)); 
    $light: (#{$key}-light: lighten($color, 10%)); 

    // Update global map with iteration map 
    $colors-dark: map-merge($colors-dark, $dark); 
    $colors-light: map-merge($colors-light, $light); 
}; 

// Dark colors 
@each $key, $color in $colors-dark { 
    .btn.#{$key} { 
    backgound-color: $color; 
    } 
} 

// Light colors 
@each $key, $color in $colors-light { 
    .btn.#{$key} { 
    backgound-color: $color; 
    } 
}