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

Question

能否使用 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");
}

Answer 1

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;
  }
}