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

我有一个名为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”。

GilTony泡芙2020/03/23 14:31:30

尽管此示例更为冗长,但无需设置两个空变量:

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

不过,@ cimmanon的第二个和第三个示例要好得多。

Mandy2020/03/23 14:31:30

这是完全可以预期的。变量具有作用域如果您在控制块内定义它们(例如一条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);