Блог

Главная - Вопросы по программированию - Невозможно использовать пользовательские свойства CSS (также известные как переменные CSS) с инструкцией SASS @if

Невозможно использовать пользовательские свойства CSS (также известные как переменные CSS) с инструкцией SASS @if

#css #sass #css-variables #scss-mixins

#css #sass #css-переменные #scss-mixins

Вопрос:

Я пытаюсь передать некоторые пользовательские свойства CSS в SASS Mixin. Я могу использовать переменные при применении непосредственно в желаемом стиле. Но когда я пытаюсь использовать переменную в операторе If, это не работает.

Пример смешивания:

 @mixin bg-color($hue, $status) {
  background: hsl($hue, 50%, 50%); // $hue works as expected

  @if $status == 'danger' { // doesn't work!
    color: 'red';
  } @else if $status == 'warning' { // doesn't work!
    color: 'orange';
  } @else { // always enters the else branch
    color: 'black';
  }
}

CSS:

 :root {
    --hue: 195;
    --status: 'default';
}

.demo {
    @include bg-color(var(---hue), var(---status));
}

Если я вручную добавлю значение статуса в mixin, это сработает:

 .demo {
    @include bg-color(var(---hue), 'danger');
}

Есть идеи, в чем может быть проблема?

ОБНОВЛЕНИЕ: как упоминал @temani-afif, этот подход невозможен, поскольку файлы SASS компилируются до использования переменных CSS.

Комментарии:

1. это невозможно, SASS является препроцессором, а переменные CSS появляются позже во время выполнения

Ответ №1:

Если у вас есть какой-то файл, в который вы импортируете все файлы SCSS, это зависит от того, что импортируется первым, а что импортируется после.

Убедитесь, что тот, который вам нужно прочитать VS, является первым.

Например, мне нужно было сначала прочитать мои переменные, так что это должно быть сначала, иначе мой код читает mixin и еще не знает, что такое ‘$ blue’.

Метки: