gpt4 book ai didi

html - Sass (SCSS) 如何使用独特的颜色和背景图像来简洁地设置多个元素的样式?

转载 作者:太空宇宙 更新时间:2023-11-03 22:37:21 24 4
gpt4 key购买 nike

能否使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com