SCSS @each 嵌套颜色

Question

我有一系列选择器可以为星期几着色

我愿意做；

$saturday : blue;
$sunday : green;
...
$friday : red;

$days : saturday, sunday, ... friday;
@each $day in $days {
  .day-{$day}  {
    background: rgba(${$day}, 0.15);
    & .weekday {
      background: ${$day};
    }
  }
}

但它不起作用（无法编译）。

这种嵌套在 SCSS 中根本不可能吗？还是我的语法有误？

Answer 1

你的代码的某些部分有点不清楚，所以我假设你正在尝试做的应该更像下面这样：

$days : (
  saturday: blue,
  sunday: green,
  ...
  friday: red
);

@each $day, $color in $days {
  .day-#{$day}  {
    background: rgba($color, 0.15);
    & .weekday {
      background: $color;
    }
  }
}

代码中一个值得注意的错误是 interpolations 的错误语法，应该写成 #{$variable} 而不是 ${$variable} 或 {variable}。此外，不需要插入 所有内容，您可以查看文档以更好地理解这一点。

然后，由于您需要将日期与颜色相关联，因此您应该使用 map instead of a list. Using the @each 循环让您访问每个值，以便您可以在代码中需要的地方使用它们。

SCSS @each 嵌套颜色

SCSS @each nesting colours

sass

scss-mixins