SASS忽略变量，if语句

我有下面的代码名为style.scss一个文件中定义：SASS忽略变量，if语句

@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; 
}

的如 - 语句正常工作，但内部定义的变量不起作用。当我尝试编译它时，我不断收到：

Syntax error: Undefined variable: “$text-color”.

来源

2013-03-12 Afterlame

实际上我踏入了同样的事情。我想知道我的sass代码在几个月后不工作。注意到，我更新了我的grunt-sass（node-sass/libsass）版本。我100％确定在'@ if/@ else'里面定义变量的时候是有效的。我玩了很多。也许这是一个错误，它不应该工作。：D感谢您澄清这一点，@ cimmanon。 – monospace 2017-02-23 12:27:50

这是完全预期的。变量有一个范围给他们。如果您在控制块内部定义它们（如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);

来源

2013-03-12 21:19:19 cimmanon

谢谢，解决了它。所以它的行为非常像PHP函数中的变量。我不喜欢创建空变量，但这是个窍门。是否有任何命令，等于PHP的_global_命令？这对我来说会感觉更舒适一些。我试过你的最后一个例子，它的工作，但我从来没有见过任何if语句这样写。我还没有在SASS文档中找到它。你可以给我更多的资料吗？ – Afterlame 2013-03-12 23:26:13

我想你可以这样思考范围。 PHP作为一种语言并没有像其他语言那样具有适当的范围。 Sass没有* global *关键字，任何在大括号外声明的内容都可以在里面访问。 if函数（不要和'@ if'控制块混淆）在这里：http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#if-instance_method – cimmanon 2013-03-13 00:21:20

最终auto在这个答案覆盖将停止工作！ SASS现在希望在覆盖块范围内的全局变量时将'！global'附加到值。否则，它会开始制造当地的变数。 – 2014-07-11 14:23:12

虽然这个例子甚至是更多详细，它消除了需要设置两个空变量：

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

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

来源

2014-11-05 17:45:23 graygilmore

SASS忽略变量，if语句

回答

相关问题