能否使用 SCSS 来整合这种为多个元素分配颜色和图像的 CSS,并使开发人员更容易进行编辑?
.tile--hamburger {
color: tan;
background-image: url("hamburger.jpg");
}
.tile--hotdog {
color: red;
background-image: url("hotdog.jpg");
}
.tile--fries {
color: yellow;
background-image: url("fries.jpg");
}
.tile--chicken {
color: brown;
background-image: url("chicken.jpg");
}
.tile--salad {
color: green;
background-image: url("salad.jpg");
}
最佳答案
Sass 中的 @each
指令可用于迭代变量映射,使此代码更易于管理。
$foods: (
hamburger: tan,
hotdog: red,
fries: yellow,
chicken: brown,
salad: green
);
@each $name, $color in $foods {
.tile--#{$name} {
background-image: url('#{$name}.jpg');
color: $color;
}
}
关于html - Sass (SCSS) 如何使用独特的颜色和背景图像来简洁地设置多个元素的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45722367/