Функция SASS темнеет и светлее не работает при использовании цветовых объектов

Question

Я пытаюсь использовать функцию sass darken, но когда я читаю из объекта sass в моем модуле scss, он думает, что цвет на самом деле является строкой, и, таким образом, функция не может проанализировать переданную переменную.

variables.scss

$primary: #ae9fec;
$secondary: #d19ac1;

$theme: (
    "primary": ($primary, white),
    "secondary": ($secondary, white)
);

Button.module.scss

@each $colorGroup in $theme {
    &[data-variant="#{nth($colorGroup, 1)}"] {
        background-color: #{nth(nth($colorGroup, 2), 1)}); // this works

        &:hover {
            background-color: darken(#{nth(nth($colorGroup, 2), 1)}), 10%); // this does not because it thinks its a string.  I tried unquote() but that didn't work, still thinks it's a string.
        }
    }
}

Answer 1

Если вы удалите интерполяцию в правилах селектора (а не в самом селекторе), она должна скомпилироваться, как задумано.

Вот тест - и я предполагаю, что вы вложили цикл @each вселектор или использование @at-root, поскольку правила базового уровня не могут содержать символ &, подобный этому - с селектором .button для вашего набора правил:

/* variables.scss */
$primary: #ae9fec;
$secondary: #d19ac1;

$theme: (
    "primary": ($primary, white),
    "secondary": ($secondary, white)
);

/* Button.module.scss */
.button {
    @each $colorGroup in $theme {
        &[data-variant="#{nth($colorGroup, 1)}"] {
            background-color: nth(nth($colorGroup, 2), 1);

            &:hover {
                background-color: darken(nth(nth($colorGroup, 2), 1), 10%);
            }
        }
    }
}

Скомпилированный код выглядит следующим образом:

.button[data-variant="primary"] {
  background-color: #ae9fec;
}

.button[data-variant="primary"]:hover {
  background-color: #8a74e4; /* Darkened $primary */
}

.button[data-variant="secondary"] {
  background-color: #d19ac1;
}

.button[data-variant="secondary"]:hover {
  background-color: #c177ab; /* Darkened $secondary */
}

Я также удалил лишние скобки в примере.