0

我正在使用 "sass": "^1.44.0" (dart-sass) 和 create-react-app。我在 _colors.scss 中有以下内容：

$app-colors: (
  'black': #232323,
  'blue': #1caac5,
  'green': #32bf73,
  'yellow': #ffb102,
  'white': #ffffff,
);

这是我的 _derivedColors.scss：

@use "sass:color";
@import './_colors.scss';

@each $colorName, $colorHex in $app-colors {
  $#{$colorName}-20: color.scale($colorHex, $whiteness: 20%);
  $#{$colorName}-40: color.scale($colorHex, $whiteness: 40%);
  $#{$colorName}-60: color.scale($colorHex, $whiteness: 60%);
  $#{$colorName}-80: color.scale($colorHex, $whiteness: 80%);
}

我想要发生的是获得 4 个全局变量，这些变量将在 $app-colors 中缩放每种颜色的白度以获得百分比值并适当命名。例如，第一个变量将被命名$blue-20并包含color.scale(#1caac5, 20%).

编译我的代码时，出现以下错误：

./src/components/common/CallToAction/style.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src? ?postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4 !./src/components/common/CallToAction/style.scss) SassError: Invalid CSS after "...n $app-colors {": expected 1 selector or at-rule, is "$#{$colorName}-20 : " 在 src/style/_derivedColors.scss 的第 9 行，来自 /Users/mihasustersic/Work/taia-app-react/src/components/common/CallToAction/style 第 1 行的 src/style/_variables.scss 第 4 行.scss @each $colorName, $colorHex in $app-colors {

----------------------------------------------------------^

我究竟做错了什么？

4

1 回答 1

0

我不知道您的代码基于哪些资源，但根据 SASS 官方文档，常规@each循环应如下所示：

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

知道了这一点，您应该能够将其应用于您的场景：

@use "sass:color";

$app-colors: (
  'black': #232323,
  'blue': #1caac5,
  'green': #32bf73,
  'yellow': #ffb102,
  'white': #ffffff,
);

@each $colorName, $colorHex in $app-colors {
  ##{$colorName}-20 {
      color: color.scale($colorHex, $whiteness: 20%);
  }
  ##{$colorName}-40 {
      color: color.scale($colorHex, $whiteness: 40%);
  }
  ##{$colorName}-60 {
      color: color.scale($colorHex, $whiteness: 60%);
  }
  ##{$colorName}-80 {
      color: color.scale($colorHex, $whiteness: 80%);
  }
}

把我的 SASS 代码放在这里，你会看到它是如何正确编译成 CSS 的。

于 2021-12-13T14:39:55.797 回答