使用SASS for循环定义变量颜色 [英] Using SASS for loop to define variable color

问题描述

所以我有这样定义的颜色：

So I have some colors defined like this:

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

现在我想为每种颜色自动创建.blue_ {number}到目前为止，我有：

Now I want to automatically create .blue_{number} classes for every color. So far I got:

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

但是'color：$ blue _＃{$ i }'不工作。
我如何以另一种方式引用变量？

But the ´color:$blue_#{$i}´ doesnt work. How can I reference to the variable in another way?! Im stuck.

推荐答案

您可以这样做

a href =http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#nth-instance_method =nofollow>函数第n个来源

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
$ b

HTML

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

DEMO

请参阅演示

这篇关于使用SASS for循环定义变量颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！