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