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

【问题标题】：SASS ignores variables, defined in if-statementSASS 忽略在 if 语句中定义的变量
【发布时间】：2013-02-28 13:30:01
【问题描述】：

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

【问题讨论】：

我实际上也涉足了同样的事情。我想知道几个月后我的 sass 代码不起作用。注意到，我更新了我的 grunt-sass (node-sass/libsass) 版本。我 100% 确定在 @if/@else 中定义变量当时有效。我玩了很多。也许这是一个错误，它不应该工作。 :D 感谢您澄清这一点，@cimmanon。

标签： variables if-statement sass

【解决方案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);

【讨论】：

谢谢，解决了。所以它的行为很像 PHP 函数中的变量。我不喜欢创建空变量，但这可以解决问题。是否有任何命令，等于 PHP 中的 global 命令？这对我来说会感觉更舒服一些。我尝试了您的最后一个示例并且它有效，但我从未见过任何这样写的 if 语句。而且我还没有在 SASS 文档中找到它。你能给我更多的资料吗？
我猜你可以考虑这样界定范围。作为一种语言，PHP 不像其他语言那样具有适当的作用域。 Sass 没有 global 关键字，在花括号之外声明的任何内容都可以在里面访问。 if 函数（不要与 @if 控制块混淆）在这里：sass-lang.com/docs/yardoc/Sass/Script/…
最终这个答案中的自动覆盖将停止工作！当您在块范围内覆盖全局变量时，SASS 现在希望您将 `!global` 附加到值。否则它将开始使它们成为本地变量。
@cimmanon 为什么 PHP 的范围界定“不正确”？问题是这个 SASS 作用域很奇怪：很少有人会期望 if 语句创建一个新的变量作用域，并且他们正在使它更像 PHP 的函数作用域：必须声明全局 var 使用。
这种行为似乎与大多数其他语言有惊人的不同，我在文档中没有看到关于变量范围和 @if 块的任何具体内容。这有可能从一个错误开始，现在变成了规范吗？以下是文档：sass-lang.com/documentation/file.SASS_REFERENCE.html

【解决方案2】：

虽然这个例子更多冗长，但它消除了设置两个空变量的需要：

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

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

【讨论】：

Sass docs 说，'流控制范围内的变量可以分配给外部范围内的现有变量，但它们不能在那里声明新变量。确保变量在分配之前已经声明，即使您需要将其声明为null。奇怪的是，这仍然有效！但显然，这不是推荐的方式。