Merge i zmiennej do zmiennej z SASS

Question

Chcę połączyć zmienną i ciąg do nowej zmiennej, jak następuje:

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

Czy ktoś wie jak to zrobić?

Answer 1

Nie, nie można mieć zmiennych dynamicznych.

Z docs:

Można również używać zmiennych SassScript w selektorów i nazwy własności używająC# {} interpolacji

można osiągnąć ten sam efekt za pomocą dwóch list i funkcji 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; 
} 

Również może to być czystsze, aby użyć dyrektywy @for:

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

Ponadto, jeśli chcesz zdefiniować zmienne wyraźnie, dzięki czemu można wykorzystać je gdzie indziej, zrób listę zmiennych:

$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 uczynić tę odpowiedź prawie nieaktualny.

Inną opcją jest użycie jednej listy zawierającej po dwa elementy i użycie jej jako mapy mieszającej.

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

Lubię wykonywać proste funkcje, aby uczynić znaczenie mojego kodu jaśniejszym. pewnie bym zrobić coś bardziej w stylu:

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

A potem bym reimplement pętlę tak:

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

Nie zapisano żadnych wierszy, ale zrobiliśmy intencji pętla nieco wyraźniejsza.