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

Question

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

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

क्या सास में इस कोड को सरल (या बेहतर) सिंटैक्स के साथ फिर से लिखने का कोई तरीका है ?

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

Comments

मुझे लगता है कि "सरल / बेहतर" ओपी का अर्थ "एक तरह से है जो पदानुक्रम को इंगित करने के लिए

— व्हॉट्सएप

Answer 1

संयुक्त बाल चयनकर्ता के बिना आप शायद ऐसा ही कुछ करेंगे:

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

यदि आप के साथ एक ही वाक्यविन्यास को पुन: पेश करना चाहते हैं >, तो आप इस पर कर सकते हैं:

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

यह इसके लिए संकलित है:

foo > bar > baz {
  color: red;
}

---

या सास में:

foo
  > bar
    > baz
      color: red

Comments

यह सिर्फ इसे लंबा करने जा रहा है, है ना?

— BoltClock

हालांकि मैं यही चाहता हूं कि ओपी चाहता है

— अरनौद ले ब्लैंक

अच्छा धन्यवाद। btw, जैसा कि बोल्टकॉक ने कहा, अब (और किसी तरह मेरे लिए बदसूरत) है। लगता है जैसे मुझे अपनी पुरानी स्टाइल के साथ रहना होगा।

— 9

आपको "अच्छे सिंटैक्स" को परिभाषित करने की आवश्यकता है;)

— अरनॉड ले ब्लैंक

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

Comments

तो संयुक्त बाल चयनकर्ता के लिए कोई परिवर्तन नहीं है ... शायद इसके लिए कोई विकल्प?

— फ्राँस