內用一個變量

Question

我想下面使用SCSS循環SCSS變量：

@each $var in dark, purple, green, cyan, silver, white { 

    .text-#{$var} { 
    color: nth($color-, $var); 
    } 
    .btn-#{$var} { 
    background-color: nth($color-, $var); 
    } 
} 

以使用以下變量：

$color-dark: #0D0E1E; 
$color-purple: #333366; 
$color-green: #33cc99; 
$color-cyan: #00cccc; 
$color-silver: #ccc; 
$color-white: #fff; 

，但它無法正常工作。 $color-#{$var}不能正常工作。我可以這樣做嗎？

Answer 1

nth獲取列表中的項目。第一個參數是列表，第二個參數是列表中的一個索引。另外SASS認爲任何與$是一個變量，所以$ color-是一個變量。您尚未將$ color-定義爲變量，這不是您的預期用途。

DOCS。

但是你可以用地圖得到您想要的結果......

DEMO

$color-dark: #0D0E1E; 
$color-purple: #333366; 
$color-green: #33cc99; 
$color-cyan: #00cccc; 
$color-silver: #ccc; 
$color-white: #fff; 

$colors: (
    dark: $color-dark, 
    purple: $color-purple, 
    green: $color-green, 
    cyan: $color-cyan, 
    silver: $color-silver, 
    white: $color-white 
); 

@each $name, $val in $colors { 
    .text-#{$name} { 
    color: $val; 
    } 

    .btn-#{$name} { 
    background-color: $val; 
    } 
}