Verwenden eines SASS-Listenelements als Variablenname

Question

Ich versuche derzeit, eine SASS-Liste durchzulaufen und die darin enthaltenen Elemente mit den Variablennamen in meinem Code zu vergleichen, damit ich diese Variablen innerhalb der Schleife verwenden kann Dabei wird auch die Listenzeichenfolge verwendet, um eine Klasse zu erstellen.

Was ich im Moment habe ist dies ...

$sections: upcoming messages profile area report; 

@each $section in $sections { 
    .#{$section} { 
     h2 { color: $#{$section}; } 
     h2:after { background-color: $#{$section}; } 
    } 
} 

Meine Vermutung ist, dass ich nicht „$ Abschnitt“ innerhalb der „# {}“ verwenden kann, aber wenn das der Fall ist Was ist der richtige Weg, um das zu erreichen, was ich versuche?

Answer 1

Die folgende Lösung funktioniert für Sass 3,3

//make sure the color variables are defined before calling the @each function 
$upcoming: green; 
$messages: yellow; 
$profile: red; 
$area: blue; 
$report: black; 


$sections: (upcoming: $upcoming, messages: $messages, profile: $profile, area: $area, report: $report); 

@each $section, $color in $sections { 
    .#{$section} { 
     h2 { color: $color } 
     h2:after { background-color: $color } 
    } 
} 

und Sie werden die folgenden CSS erhalten:

.upcoming h2 { 
    color: green; 
} 

.upcoming h2:after { 
    background-color: green; 
} 

.messages h2 { 
    color: yellow; 
} 

.messages h2:after { 
    background-color: yellow; 
} 
...