将变量添加到 属性 会导致 lighten/darken 不起作用

Question

我正在尝试使用 mixin 创建变量，但是，当我这样做时，lighten 和 darken 函数不起作用。

@mixin create-color($name, $value) {
  --color-#{$name}: #{$value};
  --color-#{$name}-light: lighten($color: #{$value}, $amount: 10);
  --color-#{$name}-dark: darken($color: #{$value}, $amount: 10);
}

:root {
  @include create-color('primary', #0000cd);
}

这导致以下输出：

:root {
    --color-primary: #0000cd;
    --color-primary-light: lighten($color: #0000cd, $amount: 10);
    --color-primary-dark: darken($color: #0000cd, $amount: 10);
}

Answer 1

您需要interpolate整个函数。

@mixin create-color($name, $value) {
  --color-#{$name}: #{$value};
  --color-#{$name}-light: #{lighten($color: $value, $amount: 10)};
  --color-#{$name}-dark: #{darken($color: $value, $amount: 10)};
}

:root {
  @include create-color('primary', #0000cd);
}