Sassとcombined childセレクター

Question

私はちょうどSassを発見しました。私はそれについてとても興奮しています。

ところで、私のウェブサイトでは、子セレクタを組み合わせたスタイルのツリーのようなナビゲーションメニューを実装しています（E > F）。

このコードをSassのより簡単な（またはより良い）構文に書き換える方法はありますか？これまであなたが>と同じ構文を再現したい場合は

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

、あなたはできます：あなたはおそらくこれに似た何かをするだろう組み合わせ子セレクタなし

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

Answer 1

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

コンパイル結果：

foo > bar > baz { 
    color: red; 
} 

---

それともSASSで10：あなたが持っている単一のルールについては

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; } 
}