常常会有需求 根据不同的状态给元素设置不同的颜色值,类似状态标签等等 如图的标签 用scss的同学,可以用@each指令 完成一系列样式的设置 代码如下:
$
colors: (
blue: #008fff,
grey: #909299,
orange: #fa8c16,
red: #fe5951,
green: #2ac66a,
);
.status {
.label {
&:before {
content: "";
display: inline-block
;
width: 8px
;
height: 8px
;
border-radius: 50%
;
margin-right: 6px
;
}
}
@each $name, $color in $colors {
&.#{$name
} {
.label {
&:before {
background-color: $color
;
}
}
}
}
}
转载请注明原文地址: https://lol.8miu.com/read-31274.html