सास और संयुक्त बाल चयनकर्ता

Question

मैंने अभी सास की खोज की है, और मैं इसके बारे में बहुत उत्साहित हूं।

वैसे, मेरी वेबसाइट में मैं एक पेड़ की तरह नेविगेशन मेनू, संयुक्त बच्चे चयनकर्ता (E > F) का उपयोग स्टाइल को लागू।

को फिर से लिखने का कोई तरीका है इस कोड को सास पर एक अधिक सरल (या बेहतर) वाक्यविन्यास में?

#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

कि एकल नियम आप के लिए, वहाँ यह करने के लिए किसी भी कम तरीका नहीं है। बाल संयोजक सीएसएस और सास/एससीएसएस में समान है और इसमें कोई विकल्प नहीं है।

हालांकि, अगर आप इस तरह से अधिक नियम था:

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