使用SASS for循環定義變量顏色

Question

所以我有這樣定義的一些顏色：

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

現在我想自動創建.blue_ {}數班每一種顏色。到目前爲止，我得到了：

@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

見demo

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; 
}