使用父類

Question

我試過尋找答案，但我覺得我問的是錯誤的問題。

我想創建一個「基本父」類，我可以用它來很好地分割我的規則並跨越多個文件。母公司的結構是這樣的：

.parent { 
    .child { 
     //some rules here 
    } 

話，我希望能夠導入父和子類來幫助定義其他元素（使用人造語法在這裏）

@[custom class name]: 
.parent { 
    //some rules 
    .child { 
     color: #000 
    } 

然後，使用我的自定義類的名字，我可以指定這是另一種選擇的親本，如：

@[custom class name] { 
    .grand-child { 
       background-color: #fff; 
    } 
} 

這將產生出以下規則

.parent .child .grand-child { 
    color: #000; 
    background-color: #fff; 
} 

Answer 1

這樣做可能是創建一個使用@content指令一個mixin，像這樣的一種方法：

@mixin selectors { 
    .parent { 
    .child { 
     @content; 
    } 
    } 
} 

然後，你要.parent .child下窩的東西任何時候，你可以這樣寫：

@include selectors { 
    .grand-child { 
    color: #000; 
    } 
} 

這將導致以下CSS輸出：

.parent .child .grand-child { 
    color: #000; 
} 

Answer 2

您始終可以使用&選擇器。

如果.grand孩子是在另一個文件中，你可以做這樣的事情：

.grand-child{ 
    .parent .child & { 
     color: #000; 
    } 
} 

這將編譯爲

.parent .child .grand-child{ 
    color: #000; 
} 

或者，也許你也在尋找@extend可能性？

，你會增加

.grand-child{ 
    @extend .parent .child; 
    color: #000 
} 

這將得到.parent .child風格，並將其添加到大孩子，但只有造型，它不會改變上面的選擇。