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

Syntax error: Undefined variable: “$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);