SASS在@each循環中包含變量

Question

我有一個SASS mixin設置爲循環訪問一組顏色，並在主體具有特定數據顏色時將其應用於特定元素。這一切都工作正常，但我很想知道，如果你也可以使用變量作爲顏色，而不是使用'藍色，綠色，紅色，紫色，橙色' '$藍色，$綠色，$紅色'等有不同的十六進制值。

有什麼建議嗎？

我有這個目前...

$blue: #003fb8; 
$green: #005f30; 
$red: #fe5053; 
$purple: #5f0d82; 
$orange: #ff6d00; 

@mixin coloured-elements($color) { 
    a:hover, 
    a.site-title, 
    nav.main ul li.active a, 
    .projects--layout .project h3 { 
     color: $color; 
    } 
} 

$colors_names: blue, green, red, purple, orange; 
$colors_variables: $blue, $green, $red, $purple, $orange; 
@each $color in $colors_variables { 
    body[data-colour="#{$color}"] { 
     @include coloured-elements($color); 
    } 
} 

，它輸出以下...但我怎麼可以使用$ colors_name作爲數據屬性，而不是十六進制值？

body[data-colour="#003fb8"] a:hover, 
body[data-colour="#003fb8"] a.site-title, 
body[data-colour="#003fb8"] nav.main ul li.active a, 
body[data-colour="#003fb8"] .projects--layout .project h3 { 
    color: #003fb8; 
} 

body[data-colour="#005f30"] a:hover, 
body[data-colour="#005f30"] a.site-title, 
body[data-colour="#005f30"] nav.main ul li.active a, 
body[data-colour="#005f30"] .projects--layout .project h3 { 
    color: #005f30; 
} 

body[data-colour="#fe5053"] a:hover, 
body[data-colour="#fe5053"] a.site-title, 
body[data-colour="#fe5053"] nav.main ul li.active a, 
body[data-colour="#fe5053"] .projects--layout .project h3 { 
    color: #fe5053; 
} 

body[data-colour="#5f0d82"] a:hover, 
body[data-colour="#5f0d82"] a.site-title, 
body[data-colour="#5f0d82"] nav.main ul li.active a, 
body[data-colour="#5f0d82"] .projects--layout .project h3 { 
    color: #5f0d82; 
} 

body[data-colour="#ff6d00"] a:hover, 
body[data-colour="#ff6d00"] a.site-title, 
body[data-colour="#ff6d00"] nav.main ul li.active a, 
body[data-colour="#ff6d00"] .projects--layout .project h3 { 
    color: #ff6d00; 
} 

Answer 1

我相信這是你要找的內容。存儲在變量上的關鍵值。

$blue: (
    blue, 
    #003fb8 
); 

$green: (
    green, 
    #005f30 
); 

$red: (
    red, 
    #fe5053 
); 

$purple: (
    purple, 
    #5f0d82 
); 

$orange: (
    orange, 
    #ff6d00 
); 


@mixin coloured-elements($color) { 
    a:hover, 
    a.site-title, 
    nav.main ul li.active a, 
    .projects--layout .project h3 { 
    color: $color; 
    } 
} 

$colors_variables: $blue, $green, $red, $purple, $orange; 

@each $key, $value in $colors_variables { 
    body[data-colour="#{$key}"] { 
    @include coloured-elements($value); 
    } 
} 

這將轉化爲

body[data-colour="blue"] a:hover, 
body[data-colour="blue"] a.site-title, 
body[data-colour="blue"] nav.main ul li.active a, 
body[data-colour="blue"] .projects--layout .project h3 { 
    color: #003fb8; 
} 

body[data-colour="green"] a:hover, 
body[data-colour="green"] a.site-title, 
body[data-colour="green"] nav.main ul li.active a, 
body[data-colour="green"] .projects--layout .project h3 { 
    color: #005f30; 
} 

body[data-colour="red"] a:hover, 
body[data-colour="red"] a.site-title, 
body[data-colour="red"] nav.main ul li.active a, 
body[data-colour="red"] .projects--layout .project h3 { 
    color: #fe5053; 
} 

body[data-colour="purple"] a:hover, 
body[data-colour="purple"] a.site-title, 
body[data-colour="purple"] nav.main ul li.active a, 
body[data-colour="purple"] .projects--layout .project h3 { 
    color: #5f0d82; 
} 

body[data-colour="orange"] a:hover, 
body[data-colour="orange"] a.site-title, 
body[data-colour="orange"] nav.main ul li.active a, 
body[data-colour="orange"] .projects--layout .project h3 { 
    color: #ff6d00; 
}