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的第二和第三个例子要好得多.