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

变量 CSS

神乐卡卡西

2020-03-24

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

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

有人知道怎么做这个吗？

第3720篇《使用SASS将字符串和变量合并为变量\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
乐米亚 2020.03.24

不，您不能有动态变量。

从文档：

您还可以使用＃{}插值在选择器和属性名称中使用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;

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android