Merge-String und Variable auf eine Variable mit SASS

Question

Ich möchte eine Variable und eine Zeichenfolge in eine neue Variable fusionieren, wie folgt aus:

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

Weiß jemand, wie dies zu tun?

Answer 1

Nein, Sie können keine dynamischen Variablen haben.

Vom docs:

Sie können auch SassScript Variablen in Selektoren und Eigenschaftsnamen mit # {} Interpolation

verwenden Sie können den gleichen Effekt mit zwei Listen und die nth() Funktion erfüllen.

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

Auch könnte es sauberer sein, die @for Richtlinie zu verwenden:

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

Darüber hinaus, wenn Sie die Variablen explizit definieren möchten, damit Sie sie an anderer Stelle verwenden können, eine Liste von Variablen machen:

$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 diese Antwort machen so ziemlich veraltet.

Eine andere Möglichkeit besteht darin, eine Liste mit jeweils zwei Elementen zu verwenden und sie als Hashmap zu verwenden.

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

Ich mache gerne einfache Funktionen, um die Bedeutung meines Codes klarer zu machen. Ich würde wahrscheinlich wie etwas mehr:

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

Und dann würde ich die Schleife wie folgt neu implementieren:

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

Wir keine Zeilen gespeichert haben, aber wir haben die Absicht aus die Schleife ein bisschen klarer.