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”。
第2836篇《SASS忽略在if语句中定义的变量》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
这是完全可以预期的。变量具有作用域。如果您在控制块内定义它们（例如一条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);
相似问题
问题类别
尽管此示例更为冗长，但无需设置两个空变量：
不过，@ cimmanon的第二个和第三个示例要好得多。