合并字符串和可变与SASS

Question

我想给一个变量和一个字符串合并到一个新的变量，像下面的变量：

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

是否有人知道如何做到这一点？

Answer 1

不，你不能有动态变量。

从docs：

您还可以使用SassScript变量选择和属性名称使用＃{}插值

可以完成使用两个列表和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; 
} 

而且，它可能是更清洁使用@for指令：

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

此外，如果要定义变量明确，所以你可以在其他地方使用它们，使变量列表：

$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使这个答案非常过时。

另一种选择是使用一个列表，每个列表包含两个元素，并将其用作散列表。

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

我喜欢使简单的功能，使我的代码的含义更清晰。我可能会做更多的东西一样：

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

然后我会重新实现这样的循环：

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

我们没有保存任何线，但我们已经取得的意图循环更清晰一点。