css - SASS for ループを使用して変数の色を定義する

Question

だから私はこのように定義されたいくつかの色を持っています:

$blue_1     : #ecf5f9;
$blue_2     : #cfe5ef;
$blue_3     : #b1d5e6;

ここで、すべての色に対して .blue_{number} クラスを自動的に作成したいと考えています。これまでのところ、私は得ました：

@for $i from 1 through 12{
    .blue_#{$i}{
        color: $blue_#{$i};
    }   
}

しかし、「color:$blue_#{$i}」は機能しません。別の方法で変数を参照するにはどうすればよいですか?! 立ち往生しています。

Answer 1

このようなことができます

関数 nth のソース

SCSS

$colors : #ecf5f9 #cfe5ef #b1d5e6;
@for $i from 1 through 3 {
  h1.blue-#{$i}
    {
      background-color : nth($colors, $i)  
     }
}

HTML

<h1 class="blue-1">blue one</h1>
<h1 class="blue-2">blue two</h1>
<h1 class="blue-3">blue three</h1>

デモ

デモを見る

Answer 2

これは、次のように for ループで実行できます。

$blue_1     : #ecf5f9;
$blue_2     : #cfe5ef;
$blue_3     : #b1d5e6;

@for $i from 1 through 9 {
    @if $i == 1 {
        $bg_color: $blue1
    }
    @if $i == 2 {
        $bg_color: $blue2
    }
    .....

    .blue#{$i} 
        background-color: #{!bg_color}
}

そのコードは次のようなものを返す必要があります。

.blue1 {
  background-color:#ecf5f9;
}
.blue2 {
  background-color:#cfe5ef;
}