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