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 而不是list。使用@each 循环，您可以访问每个值，以便您可以在代码中需要的地方使用它们。