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

你可以这样做

Source for the function 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>

演示

参见 demo