作者:vvdjiechipi48_2a247d | 来源:互联网 | 2023-02-04 16:45
我试图循环我的颜色列表,以更改背景颜色.但是以下失败了.
$speech-bubble-default: $colors-chalk;
$speech-bubble-blush: $colors-blush;
$speech-bubble-brick: $colors-brick;
$speech-bubble-pink: $colors-pink;
$speech-bubble-slate: $colors-slate;
$colors-list: blush brick default pink slate;
@each $current-color in $colors-list {
&.speech-bubble--#{$current-color} {
background-color: $speech-bubble--#{$current-color};
&::after {
border-bottom-color: $speech-bubble--#{$current-color};
}
}
}
'错误:未定义的变量:"$ speech-bubble--"
有没有办法让这个循环工作?
1> llobet..:
我认为你必须更简单.我会创建一个管理颜色的列表.这样您就可以正确创建变量并避免重复代码.
$colors-list:(
default: 'chalk',
blush: 'blush',
brick: 'brick',
pink: 'pink',
slate: 'slate'
);
如果您想要一种更具描述性和语义的方式将颜色名称与其功能分开,您可以执行嵌套的颜色变量列表,如下所示:
$chalk: 'chalk';
$blush: 'blush';
$brick: 'brick';
$pink: 'pink';
$slate: 'slate';
$colors-list:(
default: $chalk,
blush: $blush,
brick: $brick,
pink: $pink,
slate: $slate
);
您的代码中的问题是您尝试通过插值引用变量,#{}
并且SASS不支持变量名插值.变量以其全名调用.你也在重复颜色列表.
为什么不:
@each $key,$val in $colors-list{
.speech-bubble--#{$key} {
background-color: #{$val};
}
}