为什么 SASS @each 语句在 Next.js 中不起作用？答案

【问题标题】：Why SASS @each statement not working in Next.js?为什么 SASS @each 语句在 Next.js 中不起作用？
【发布时间】：2021-05-27 03:07:33
【问题描述】：

我有一个带有我的配色方案的 scss 文件

_colors.scss

@import './variables';

$colors: (
  p: $color-primary,
  s: $color-secondary,
  t: $color-tertiary,
  q: $color-quartary,
);

@each $name, $hsl in $colors {
  .c-#{name} {
    color: $hsl;
  }
  .bg-#{name} {
    background: $hsl;
  }
}

和带有变量的文件

_variables.scss

$color-primary: hsl(113, 99%, 53%);
$color-secondary: hsl(0, 7%, 19%);
$color-tertiary: hsl(0, 7%, 78%);
$color-quartary: hsl(2, 87%, 48%);

最后

main.scss

@import './variables';
@import './colors';

body {
  color: $color-tertiary;
  background-color: $color-secondary;
}

所以问题是为什么我不能使用 @each 中生成的类应该是 cp, bg-p, cs，等。

如果我手动定义例如 c-p 类

.c-p {
  color: $color-primary;
}

我在 _colors.scss 或 main.scss 中定义它的位置以及在 @each 之前或之后定义它并不重要陈述。它工作得很好。

【问题讨论】：

标签： css sass next.js

【解决方案1】：

您的循环当前生成 CSS 类，例如 .bg-name 和 .c-name，因为您使用的是字符串 name 而不是变量 $name。以下应该有效：

@each $name, $hsl in $colors {
  .c-#{$name} {
    color: $hsl;
  }
  .bg-#{$name} {
    background: $hsl;
  }
}

【讨论】：