Concancate循环变量与字符串生成另一个变量在飞行

Question

我想让这种混合工作..任何想法如何协同动态变量名称，并使其处理。

$colors: purple pink; 

@each $color in $colors { 

    .box--#{$color} { 
    background-color: #{'$ui'}-$color; 
    } 

} 

在这种情况下，$ui-red是一个红色变量。

Answer 1

不幸的是，你不能在运行时生成或引用sass单个变量。但是，你可以存储你的颜色代码和青菜的地图名称（要求SASS V3.3），并用它在周期是这样的：

$colors: ("purple": #f7f, 
      "pink": #ffa); 

@each $color-name, $color-code in $colors { 
    .box--#{$color-name} { 
    background-color: $color-code; 
    } 
} 

在CSS你：

.box--purple { 
    background-color: #f7f; 
} 

.box--pink { 
    background-color: #ffa; 
} 

例子：http://www.sassmeister.com/gist/c1285109946e5207e441c7ee589dd382