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語句

回答

相關問題