使用SASS/SCSS擴展並覆蓋現有樣式

Question

我使用sass bootstrap 3.我想讓我的按鈕使用不同於我身體其他部分的字體。但按鈕從身體繼承他們的字體。

• 我想使用默認的按鈕樣式引導，而不是創建新的
• 我想離開引導.scss文件完好無損

目前，我有我自己的main.scss這覆蓋顏色等，然後​​導入引導scss。就像這樣：

$border-radius-small:   0px; 

@import 'sass-bootstrap/lib/bootstrap'; 

現在，目前我有進口的東西等之後：

.demibold { 
    font-family: 'The Message DemiBold'; 
} 

不過那時候我也有我的按鈕是這樣的：

<button id="loginButton" type="button" class="btn btn-primary btn-lg demibold"> 

我可以補充一下以我的main.scss來改變例如btn的定義，所以我不需要爲每個按鈕添加demibold樣式。

Answer 1

嘗試使用sass @extend關鍵字。

.btn { 
    @extend .demibold; 
} 

這種技術在以下模式廣泛應用於： https://coderwall.com/p/wixovg

我傾向於有時使用它自己，但不要去野外用它，用@extend有大量嵌套青菜文件會導致到非常長的css選擇器。

編輯：如果您要擴展在另一個sass文件中聲明的類，請務必將該文件導入到您的文檔中。