如何將規則導入sass中的另一條規則？

Question

如果我有這樣的

.base { 
    color:red; 
} 

.variation1 { 
    color:red; 
    border:1px solid black; 
} 

我怎樣才能將其更改爲類似

.base { 
    color:red; 
} 

.variation1 { 
    import @.base 
    border:1px solid black; 
} 

的青菜？我基本上不想重複基本的東西，我想導入它的屬性。

有誰知道嗎？

感謝

Answer 1

密新

您可以創建一個mixin創建CSS的可重複使用的塊。這有助於避免重複的代碼。

與下面的示例相比，我會建議更多的語義命名系統。

@mixin base { 
    color: red; 
} 

.base { 
    @include base; 
} 

.variation1 { 
    @include base; 
    border:1px solid black; 
} 

有關混入指令看看這個article上Sitepoint更多信息。

擴展

CSS Tricks的extend功能，還可以用來很好地闡述但它有一些怪癖吧。

.base { 
    @include base; 
} 

.variation1 { 
    @extend .base; 
    border:1px solid black; 
} 

• 它擴展所有嵌套的選擇以及
• 它不能擴展嵌套選擇
• 不能在媒體查詢內部延伸到媒體查詢之外定義選擇

從CSS Tricks