Verwenden Sie Zeichenfolge als Variable in SASS

Question

Ich habe die Variablen $person-color und $animal-color in einer separaten variables.scss Datei, die ich in meiner main.scss Datei verwenden möchte.

Was ich erreichen will, ist die folgende CSS:

.person-container { 
    background: blue; 
} 

.animal-container { 
    background: red; 
} 

Mein SCSS sieht aus wie folgt:

$items: person animal; 

@each $item in $items { 
    .$item-container { 
     background: #{$item}-color; 
    } 
} 

Das wird nicht funktionieren. Aber ich möchte den Wert der Variablen in der Zeichenfolge #{$item}-color erweitern. Gibt es eine Möglichkeit, die obige Ausgabe zu erhalten, ohne eine Karte zu verwenden?

Answer 1

Partials müssen mit einem Unterstrich ex beginnen. _variables.scss sonst wird es in eine .css

_variables.scss

$person: red; 
$animal: blue; 

main.scss

@import 'variables'; 

$items: person $person, animal $animal; 

@each $item in $items { 
    $key: nth($item, 1); 
    $value: nth($item, 2); 

    .#{$key}-container { 
     background: $value; 
    } 
} 

bearbeiten kompilieren: Jetzt sollten Sie die richtigen Ergebnisse geben!