unione e variabile per una variabile con SASS

Question

voglio unire una variabile e una stringa a una nuova variabile, come il seguente:

$product_bodyclass_list: class1 class2 class3 class4; 

$product_class1_color: #C00; 
$product_class2_color: #00C; 
$product_class3_color: #0C0; 
$product_class4_color: #000; 

@each $bodyclass in $product_bodyclass_list { 
    .page-#{$bodyclass} { 
     a { 
      color: $product_#{$bodyclass}_color; // This is wrong 
     } 
    } 
} 

Qualcuno sa come fare questo?

Answer 1

No, non è possibile avere variabili dinamiche.

Dal docs:

È inoltre possibile utilizzare le variabili SassScript in selettori e nomi di proprietà usando # {} interpolazione

È possibile ottenere lo stesso effetto utilizzando due liste e la funzione nth().

$products: class1, class2, class3, class4;  
$product_colors: #C00, #00C, #0C0, #000; 

$i: 1; 
@each $class in $products { 
    .page-#{$class} { 
     a { 
      color: nth($product_colors, $i) 
     } 
    } 
    $i: $i + 1; 
} 

Inoltre, potrebbe essere più pulito per utilizzare la direttiva @for:

@for $i from 1 through length($products) { 
    .page-#{nth($products, $i)} { 
     a { 
      color: nth($product_colors, $i) 
     } 
    } 
} 

Inoltre, se si desidera definire le variabili in modo esplicito in modo da poterli utilizzare altrove, fare una lista di variabili:

$product_class1_color: #C00; 
$product_class2_color: #00C; 
$product_class3_color: #0C0; 
$product_class4_color: #000; 

$product_colors: $product_class1_color, $product_class2_color, $product_class3_color, $product_class4_color; 

Answer 2

UPDATE: Sass maps rendere la risposta più o meno obsoleti.

Un'altra opzione consiste nell'utilizzare una lista, con due elementi ciascuno, e usarla come hashmap.

$products: class1 #C00, class2 #00C, class3 #0C0, class4 #000; 

@each $kvp in $products { // kvp stands for 'key-value pair' 
    .page-#{nth($kvp, 1)} { 
     a { 
      color: nth($kvp, 2); 
     } 
    } 
} 

Mi piace rendere semplici le funzioni per rendere più chiaro il significato del mio codice. Probabilmente farei qualcosa di più simile a:

@function kvp-key($kvp) { 
    @return nth($kvp, 1); 
} 

@function kvp-value($kvp) { 
    @if length($kvp) == 2 { 
     @return nth($kvp, 2); 
    } @else { 
     @warn "argument was not a key-value pair"; 
     @return null; 
    } 
} 

E poi mi piacerebbe reimplementare il ciclo come questo:

@each $kvp in $products { // kvp stands for 'key-value pair' 
    .page-#{kvp-key($kvp)} { 
     a { 
      color: kvp-value($kvp); 
     } 
    } 
} 

Non abbiamo salvato tutte le linee, ma abbiamo fatto l'intento di il ciclo un po 'più chiaro.