追加一個變量的值給選擇器@如果它存在（使用變量存在）

我試圖添加一個類名到SCSS中，如果它存在。追加一個變量的值給選擇器@如果它存在（使用變量存在）

使用輸出2個CSS文件的基本框架。

theme_1.css
theme_2.css

每個CSS文件從各自的SCSS文件編譯 - 其中或者包含一個稱爲$body-container或不變量。

$body-container: .body-container;

如果變量存在，那麼它應該被追加到身體標記。

這是我試過到目前爲止

body @if(variable-exists(body-container)) { $body-container } { 
    /* styles here */ 
}

我期待下面的SCSS：

對於包含變量

body .body-container { 
    /* styles here */ 
}

並沒有SCSS文件聲明的變量

body { 
    /* styles here */ 
}

但是出現以下錯誤Error: Invalid CSS after "...body-container ": expected ":", was "} {"

來源

2016-06-09 fidev

我不認爲你可以追加一個變量到這樣的選擇器。然而，你可以做一些類似[this]（http://codepen.io/anon/pen/dXGOdm）（*注意，我只是Sass/SCSS的初學者，可能有更好的方法來做這件事）。 – Harry

很好的解決問題的方法。謝謝！ +1 – fidev

我會等待一段時間，看看是否有更好的答案。如果沒有，我會發布我的解決方法作爲答案:) – Harry

正如我的評論中所提到的，我不認爲有可能將一個變量以這種方式附加到選擇器上（所使用的那個）。錯誤消息表明它期望:之後的變量名稱暗示它期望值分配到@if循環內的變量。

話雖如此，使用下面的解決方法仍然有可能實現這一點。我們的想法是查看變量是否已定義，如果是，則將另一個虛擬變量（$selector）設置爲body與原始變量（$body-container）的串聯值。如果不是，那麼只需將其設置爲body。

然後我們可以通過插值使用這個虛擬變量（$selector）。因此，如果$body-container已被定義，選擇器將是body .body-container。否則，它只是body。

$body-container: ".body-container"; 
@if variable-exists(body-container) { 
    $selector: "body " + $body-container !global; 
} 

@else { 
    $selector: "body" !global; 
} 

#{$selector} { 
    color: red; 
}

來源

2016-06-10 07:21:26 Harry

追加一個變量的值給選擇器@如果它存在（使用變量存在）

回答

相關問題