引導自定義變量的Rails SASS

Question

在樣式表/引導目錄，我有：

_variables.scss我：

$black:     #000 !default; 
$grayDark:    #333 !default; 
... 
$textColor:    $grayDark !default; 

此文件在bootstrap.scss文件導入：

// Core variables and mixins 
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc 
@import "bootstrap/mixins"; 
... 

在種樣式目錄我有bootstrap_include.scss

@import "bootstrap/bootstrap"; 
@import "bootstrap/responsive"; 

我想重寫默認的文本是黑色的，所以我創建一個自定義變量文件並導入它在我的自定義引導文件

_variables_custom .scss：

$black:     #000 !default; 
$textColor:    $black !default; 

，然後在bootstrap_custom.scss

@import "variables_custom"; 

終於在application.css.scss

*= require bootstrap_custom 
*= require bootstrap_include 

當我刷新頁面，bootstrap_custom總是空的，我是一個新手的CSS，爲什麼它不工作？

感謝

不知道這是否是好的，但我解決它使用：

我bootstrap_custom現在包括

$black:     #000 !default; 
$textColor:    $black !default; 
@import "bootstrap/bootstrap"; 
@import "bootstrap/responsive"; 

和我application.css.scss現在只包括

*= require bootstrap_custom 

Answer 1

雖然我們在談論變量，但沒有任何與CSS相關的東西。在這種情況下，變量SASS/Compass使用一個CSS預處理器工具，Rails使用CSS工具更容易使用CSS（例如通過使用變量）。

所以當你在文件中插入你的變量，並讓它被單獨處理時，它不會產生任何CSS代碼，除非你在有效的CSS屬性中使用任何。

如果你想測試，添加到您的bootstrap_custom.css是這樣的：

body { 
    background-color: $black; 
} 

你會看到正在使用您的$黑色變量。

在樣式表

Answer 2

，刪除!default

也就是說，在你的文件_variables_custom.scss - 而不是：

$black: #000 !default; 
$textColor: $black !default; 

用這個代替：

$black: #000; 
$textColor: $black; 

---

!default是一個sass va可以在!default宣佈之前或之後進行重新分配，並且非!default值總是獲勝。

這樣：

$foo: black; 
$foo: red !default; 
body { background: $foo; } 

將導致黑色機身的背景下，儘管紅被宣佈後黑