scss动态生成类名、样式值

it2025-11-08  13

常常会有需求 根据不同的状态给元素设置不同的颜色值,类似状态标签等等 如图的标签 用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; } } } } }
最新回复(0)