使用Sass自定義Foundation標籤顏色

Question

我正在嘗試更改Foundation標籤的顏色。我想根據this answer正確地做到這一點。

我site.scss：

@import "normalize"; 

$row-width: '1080px'; 
$label-font-color: #333333; 

@import "foundation"; 
@import "foundation.mvc"; 

.test { 
    color: $label-font-color; 
} 

我已經證實，改變site.scss越來越編譯。 $row-width設置正在按預期使用。我究竟做錯了什麼？爲什麼標籤顏色仍然是默認$4d4d4d？

/* Label Styles */ 
label { 
    font-size: 0.875rem; 
    color: #4d4d4d;   /* <-------- argh! */ 
    cursor: pointer; 
    display: block; 
    font-weight: normal; 
    line-height: 1.5; 
    margin-bottom: 0; 
    /* Styles for required inputs */ 
} 

.test { 
    color: #333333; /* <--- why is this one correct? */ 
} 

如果我編輯基金會的_labels.scss，附加這樣的：

.test { 
    color: $label-font-color; 
} 

到文件的末尾，它在生成的css 正確顯示出來。但爲什麼標籤會忽略它？

Answer 1

想通了。原來的label CSS是從Foundation的_forms.scss，而不是 _labels.scss生成的。生成的CSS包含一個label CSS規則和一個.label CSS規則，我沒有注意到它們之間的區別。

更改我的變量爲$form-label-font-color做了竅門。

$form-label-font-color: #333333;