[英]SCSS Variable Name Interpolation
I'm trying to create a bunch of buttons using a loop and a map in SCSS, but I don't know if the following is possible. 我正在尝试使用SCSS中的循环和映射创建一堆按钮,但是我不知道是否可以进行以下操作。 I couldn't find a direct answer when I searched for this. 搜索此内容时找不到直接答案。
Does anyone know if I can do this? 有谁知道我能做到吗? And if I can, what in my syntax is wrong? 如果可以的话,我的语法有什么错误?
$button-variants:(
primary: 'primary',
secondary: 'secondary',
positive: 'positive',
negative: 'negative',
warning: 'warning'
);
@each $key,$val in $button-variants {
.c-button--#{$key} {
@include button($color-#{$key}, $color-#{$key}-highlight, true);
}
}
I'm receiving an error: 我收到一个错误:
Error: Undefined variable: "$color-".
on line 54 of source/css/scss/04-components/_button.scss
>> @include button($color-#{$key}, $color-#{$key}-highlight, true);
Try something analogous to this: 尝试类似的方法:
/* Define the Sassy Map called $icons */
$icons: (
checkmark: a,
plus: b,
minus: c
);
/* For each key in the map, create a class */
@each $name, $value in $icons {
.icon--#{$name} {
content: $value;
}
}
And you'll get the following result: 您将得到以下结果:
/* For each key in the map, created a class */
.icon--checkmark {
content: "a";
}
.icon--plus {
content: "b";
}
.icon--minus {
content: "c";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.