variables - SASS 忽略在 if 语句中定义的变量

Question

我有一个名为 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 语句正常工作，但内部定义的变量不起作用。当我尝试编译它时，我不断得到：

语法错误：未定义变量：“$text-color”。

Answer 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);

Answer 2

虽然这个例子更加冗长，但它消除了设置两个空变量的需要：

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

@cimmanon's 2nd and 3rd examples are much better, though.