Sass 变暗功能未编译输出十六进制颜色答案

【问题标题】：Sass darken function not compiling the output hex colorSass 变暗功能未编译输出十六进制颜色
【发布时间】：2020-05-17 23:42:16
【问题描述】：

我正在尝试用两种 primary 和 secondary 颜色创建 10 种深色和浅色阴影，我希望它们在 css 变量中而不是 sass 变量中，如下所示：

$colors: (
  primary: #e32249,
  secondary: #0969a2
);

:root,
#root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};

    @for $i from 1 through 10 {
      --color-#{$name}-dark-#{$i}: darken(#{$color}, calc(#{$i} * 10%));
      --color-#{$name}-light-#{$i}: lighten(#{$color}, calc(#{$i} * 10%));
    }
  }
}

很简单，但是 darken 函数的编译 css 不是新的十六进制代码，它只是 darken(...) 函数本身，它们只是不起作用......就像这样：

我错过了什么吗？

【问题讨论】：

标签： css sass

【解决方案1】：

像#{darken(...)}一样插入整个值，否则SCSS转译器会认为它是一个CSS值，从而忽略它。

同时，删除darken函数内部的插值，因为它不需要。

另外，请删除calc()，因为 SCSS 会自动计算该值。仅在需要 CSS 计算值时使用calc。

$colors: (
  primary: #e32249,
  secondary: #0969a2
);

:root,
#root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};

    @for $i from 1 through 10 {
      --color-#{$name}-dark-#{$i}: #{darken($color, $i * 10%)};
      --color-#{$name}-light-#{$i}: #{lighten($color, $i * 10%)};
    }
  }
}

【讨论】：