Sass和組合兒童選擇器

Question

我剛剛發現了Sass，而且我一直對此非常興奮。

順便說一下，在我的網站上，我實現了一個樹形導航菜單，使用組合子選擇器（E > F）進行了樣式設計。

是否有任何方法可以將重寫爲這段代碼轉換爲Sass上更簡單（或更好）的語法？

#foo > ul > li > ul > li > a { 
    color: red; 
} 

Answer 1

沒有合併子選擇，你可能會做一些類似的：如果你想重現相同的語法與>

foo { 
    bar { 
    baz { 
     color: red; 
    } 
    } 
} 

，你可以這樣：

foo { 
    > bar { 
    > baz { 
     color: red; 
    } 
    } 
} 

編譯爲：

foo > bar > baz { 
    color: red; 
} 

---

還是以青菜：

foo 
    > bar 
    > baz 
     color: red 

Answer 2

對於你有一個規則，沒有任何縮短的方式來做到這一點。子組合器在CSS和Sass/SCSS中是一樣的，除此之外別無選擇。

但是，如果你有多個規則是這樣的：

#foo > ul > li > ul > li > a:nth-child(3n+1) { 
    color: red; 
} 

#foo > ul > li > ul > li > a:nth-child(3n+2) { 
    color: green; 
} 

#foo > ul > li > ul > li > a:nth-child(3n+3) { 
    color: blue; 
} 

你可以凝聚他們爲以下之一：

/* Sass */ 
#foo > ul > li > ul > li 
    > a:nth-child(3n+1) 
     color: red 
    > a:nth-child(3n+2) 
     color: green 
    > a:nth-child(3n+3) 
     color: blue 

/* SCSS */ 
#foo > ul > li > ul > li { 
    > a:nth-child(3n+1) { color: red; } 
    > a:nth-child(3n+2) { color: green; } 
    > a:nth-child(3n+3) { color: blue; } 
}