少級聯和重構

Question

我試圖重構一些CSS看起來像這樣：

path.myClass { 
     //some CSS 
    } 
    .someOtherClass.myClass { 
     //some other CSS 
    } 

我苦苦尋找的第一部分正確的語法。我想要看起來像這樣的東西：

.myClass { 
    path.& { 
     // some CSS 
    } 
    .someOtherClass { 
     // some other CSS 
    } 
} 

我該如何正確地重構它？

Answer 1

你可以像下面這樣做。由於頂級選擇器已具有.，因此不需要在內選擇器中的父選擇器（&）之前再次添加它。第二個非常簡單，因爲您可以在開始或結束時追加父選擇器。類的順序無關緊要。

（注：應該有，因爲它會改變的意義家長選擇之前沒有空格）

.myClass { 
    path&{ 
    color: red; 
    } 
    .someOtherClass& { /* can do &.someOtherClass also, order doesn't matter */ 
    color: blue; 
    } 
} 

以下是編譯的CSS輸出：

path.myClass { 
    color: red; 
} 
.someOtherClass.myClass { 
    color: blue; 
}