SASS enthalten Variablen in einer @each Schleife

Question

Ich habe eine SASS Mixin eingerichtet, um eine Reihe von Farben durchlaufen und sie auf bestimmte Elemente anwenden, wenn der Körper eine bestimmte Datenfarbe hat. Das funktioniert alles gut, aber ich bin neugierig zu wissen, ob anstelle von 'blau, grün, rot, lila, orange', wenn Sie Variablen als die Farben auch verwenden können; '$ blue, $ green, $ red' usw., die unterschiedliche Hex-Werte haben.

Irgendwelche Vorschläge?

Ich habe dies zur Zeit ...

$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); 
    } 
} 

Welche die unten gibt ... aber wie kann ich den $ colors_name als Datenattribut verwenden und nicht der Hex-Wert?

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

Ich glaube, das ist, was Sie suchen. Ein Schlüsselwert, der auf einer Variablen gespeichert ist.

$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); 
    } 
} 

, die

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; 
}