Функция Sass Darken не компилирует выходной шестнадцатеричный цвет

Question

Я пытаюсь создать 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%));
    }
  }
}

Довольно просто, однако скомпилированная функция css для darken - это не новый шестнадцатеричный код, это просто сама функция darken(...), и они просто не работают ... как есть :

Я что-то упустил?

Answer 1

Интерполируйте все значение, как #{darken(...)}, потому что в противном случае транспортер S CSS будет думать, что это значение CSS, игнорируя его.

В то же время удалите интерполяцию внутри darken функция, потому что она не нужна.

Кроме того, удалите calc() тоже, потому что S CSS автоматически вычислит значение. Используйте calc только тогда, когда вам нужно CSS для вычисления значения.

$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%)};
    }
  }
}