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

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

2 个答案: