使用 SASS 将字符串和变量合并为变量 [重复]答案

【问题标题】：Merge string and variable to a variable with SASS [duplicate]使用 SASS 将字符串和变量合并为变量 [重复]
【发布时间】：2013-03-25 03:56:19
【问题描述】：

我想将一个变量和一个字符串合并为一个新变量，如下所示：

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

有人知道怎么做吗？

【问题讨论】：

标签： variables sass

【解决方案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;

【讨论】：

行得通！极好的！谢谢！
你也可以通过color: nth($product-colors, index($products, $class))使第一个例子更干净
@bookcasey 对此表示感谢。我用了你的第二个选项

【解决方案2】：

更新：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);
        }
    }
}

我们没有保存任何行，但我们已经使循环的意图更加清晰。

【讨论】：