SASS игнорирует переменные, определенные в if-statement

У меня есть один файл с именем style.scss со следующим кодом:

@import 'variables';

body {
    color: $text-color;
    background: $background-color;
}

И одна часть с именем _variables.scss:

$colorscheme: white;

@if $colorscheme == white {
    $text-color: #333;
    $background-color: #fff;
}
@else {
    $text-color: #ccc;
    $background-color: #333;
}

Оператор if работает правильно, но переменные, определенные внутри, не работают. Когда я пытаюсь скомпилировать его, я продолжаю получать:

Синтаксическая ошибка: переменная Undefined: "$ text-color".

Ответ 1

Это полностью ожидалось. Переменные имеют для них объем. Если вы определяете их внутри блока управления (например, оператор if), они не будут доступны снаружи. Итак, что вам нужно сделать, это инициализировать его снаружи так:

$text-color: null;
$background-color: null;
@if $colorscheme == white {
    $text-color: #333;
    $background-color: #fff;
}
@else {
    $text-color: #ccc;
    $background-color: #333;
}

Или...

$text-color: #ccc;
$background-color: #333;
@if $colorscheme == white {
    $text-color: #333;
    $background-color: #fff;
}

Хотя было бы не так много слов, чтобы использовать функцию if() следующим образом:

$text-color: if($colorscheme == white, #333, #ccc);
$background-color: if($colorscheme == white, #fff, #333);

Ответ 2

Хотя этот пример еще более подробен, он устраняет необходимость установки двух пустых переменных:

@if $colorscheme == white {
  $text-color: #333 !global;
  $background-color: #fff !global;
} @else {
  $text-color: #ccc !global;
  $background-color: #333 !global;
}

@cimmanon 2-й и 3-й примеры намного лучше.