नेस्टेड चयनकर्ताओं के अंदर एम्परसैंड (एसएएसएस पैरेंट चयनकर्ता) का उपयोग

Question

ठीक है इसलिए इसने मुझे परेशान किया है क्योंकि मैं पिछले साल या उससे अधिक के लिए सास/एसएसएस का उपयोग कर रहा हूं। मैं अपने सामान्य अर्थ में माता-पिता चयनकर्ता को समझता हूं।

यह वह जगह है जहाँ मैं संघर्ष (चाहे वह या दस्तावेज नहीं है बस संभव नहीं):

#parent { 
    #child { 
    width: 75%; 

    .additional_parent_class & { 
     width: 50%; 
    } 
    } 
} 

यह मूलतः में बदल जाएगी:

.additional_parent_class #parent #child { 
    width: 50%; 
} 

हालांकि इस के कार्यान्वयन की वजह से समझ में आता है एम्परसैंड और इसका उपयोग कैसे किया जाता है। यह यह क्या प्राप्त करने के लिए अगर मैं पाने के लिए कोशिश कर रहा हूँ:

#parent.additional_parent_class #child { 
    width: 50%; 
} 

एक ही रास्ता मैं प्राप्त करने के लिए इस बच्चे घोषणाओं के बाहर एक और नियम लिख कर है सक्षम किया गया है:

#parent{ 
    #child { 
    width: 75%; 
    } 

    &.additional_parent_class #child { 
    width: 50%; 
    } 
} 

इस जबकि इस कार्यान्वयन में अनिवार्य रूप से 'बट में दर्द' नहीं है, यह काउंटर उत्पादक लगता है अगर # चाइल्ड के अपने बच्चे हैं जिन्हें अब दोनों नियमों में डुप्लिकेट करने की आवश्यकता होगी।

वैसे भी, शायद मैं सिर्फ चुनिंदा हूं, लेकिन चयनकर्ताओं के माध्यम से आगे बढ़ने के अधिक तरीके होने पर यह बहुत अच्छा होगा।

कोई भी कुछ जानता है जो मैं नहीं करता?

धन्यवाद!

Answer 1

मैं मानता हूं कि यह बहुत उपयोगी होगा। दुर्भाग्यवश, यह एसएएसएस (या किसी अन्य सीएसएस प्रीप्रोसेसर के बारे में मुझे पता है) में वर्तमान में संभव नहीं है।

Answer 2

हालांकि यह वर्तमान में संभव नहीं है, लेकिन & वाक्यविन्यास में इस तरह के कई समान सुधार Sass 3.3 में रिलीज़ होने के लिए निर्धारित किए गए हैं। आप सास मुद्दे here पर सुविधा के बारे में चर्चा का पालन कर सकते हैं।

Answer 3

यह v3.4 में सक्षम है 3.3 में हो सकता है लेकिन सुनिश्चित नहीं है। हालांकि मैं वाक्यविन्यास का प्रशंसक नहीं हूं। & बहुत आसान है। काश वहाँ^एक उपनाम :)

#parent { 
    #child { 
     width: 75%; 
     @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} { 
      width: 50%; 
     } 
    } 
}