मुझे सैस में नेस्टिंग से परेशानी हो रही है। कहो कि मेरे पास निम्न HTML है:
<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>
जब मैं अपनी शैलियों को घोंसले में रखने की कोशिश करता हूं तो मुझे एक जटिल त्रुटि मिलती है:
.item {
color: black;
a& {
color:blue;
}
}
जब मैं समान तत्व का हिस्सा होता हूं, तो मैं मूल चयनकर्ता से पहले एक प्रकार का चयनकर्ता कैसे संदर्भित करता हूं?
जवाबों:
जैसा कि कुमार बताते हैं , सास के बाद से यह संभव है 3.3.0.rc.1 (Maptastic Maple)।
@ एट-रूट निर्देश उनके मूल चयनकर्ताओं के नीचे नेस्टेड होने के बजाय दस्तावेज़ के मूल में एक या अधिक नियमों को उत्सर्जित करने का कारण बनता है।
हम @at-rootनिर्देशन को प्रक्षेप के साथ जोड़ सकते हैं#{} इच्छित परिणाम पर पहुंचने के लिए ।
एस.ए.एस.एस.
.item {
color: black;
@at-root {
a#{&} {
color:blue;
}
}
}
// Can also be written like this.
.item {
color: black;
@at-root a#{&} {
color:blue;
}
}
आउटपुट सीएसएस
.item {
color: black;
}
a.item {
color: blue;
}
.item a.itemकिसी कारण से आ रहा है । मैंने कोशिश की a#{&}कि यह खुद भी हो और फिर भी वही परिणाम आए।
@at-root-Only विधि समस्या का समाधान नहीं होगा यदि आप श्रृंखला को निकटतम चयनकर्ता का विस्तार करना चाहते हैं। उदहारण के लिए:
#id > .element {
@at-root div#{&} {
color: blue;
}
}
के लिए संकलन करेंगे:
div#id > .element {
color: blue;
}
क्या होगा अगर आपको .elementइसके बजाय अपने टैग से जुड़ने की आवश्यकता है#id ?
सास में एक फंक्शन है जिसे कहा जाता है selector-unify()कि यह हल करता है। इसके साथ @at-rootइसका उपयोग करना लक्षित करना संभव है .element।
#id > .element {
@at-root #{selector-unify(&, div)} {
color: blue;
}
}
के लिए संकलन करेंगे:
#id > div.element {
color: blue;
}
#id > .element #id > div.element { color: blue; }। एक और दृष्टिकोण उपयोग किया जाएगा selector_replace, #id { > .element { @at-root #{selector-replace(&,'.element', 'div.element')} { color: blue;}}}। यहां बेहतर विरासत के लिए एक जिस्ट है ।
selector-replaceयह करने का एक और तरीका भी है, लेकिन इसके लिए यह जानना आवश्यक है कि चयनकर्ता क्या है। इस selector-unifyविधि का मिश्रण में उपयोग होने का लाभ है।
शुरुआत के लिए, (इस उत्तर को लिखने के समय) कोई sass सिंटैक्स नहीं है जो चयनकर्ता और का उपयोग करता है । यदि आप ऐसा कुछ करने जा रहे हैं, तो आपको चयनकर्ता और एम्परसेंड के बीच एक स्थान की आवश्यकता होगी। उदाहरण के लिए:
.item {
.helper & {
}
}
// compiles to:
.helper .item {
}
एम्परसेंड के उपयोग का दूसरा तरीका वह है जो आप (गलत तरीके से) खोज रहे हैं:
.item {
&.helper {
}
}
// compiles to:
.item.helper {
}
यह आपको अन्य वर्गों, आईडी, छद्म चयनकर्ताओं, आदि के साथ चयनकर्ताओं का विस्तार करने की अनुमति देता है, दुर्भाग्य से आपके मामले के लिए, यह सैद्धांतिक रूप से कुछ इस तरह का संकलन करेगा। यह ऐसा है जो स्पष्ट रूप से काम नहीं करता है।
आप बस अपने सीएसएस को कैसे लिख रहे हैं, इस पर पुनर्विचार करना चाहते हैं। क्या कोई मूल तत्व है जिसका आप उपयोग कर सकते हैं?
<div class="item">
<p>text</p>
<p>text</p>
<a href="#">a link</a>
</div>
इस प्रकार, आप अपने SASS को निम्नलिखित तरीके से आसानी से लिख सकते हैं:
.item {
p {
// paragraph styles here
}
a {
// anchor styles here
}
}
(साइड नोट: आपको अपने html पर एक नज़र डालनी चाहिए। आप सिंगल और डबल कोट्स को मिक्स कर रहे हैं और पी टैग्स पर href विशेषताएँ डाल रहे हैं।)
hrefटैग लगा pरहा है।
.item { a& }और उसके लिए कोई sass सिंटैक्स नहीं है (जहाँ तक मुझे पता है। मैंने सुझाव दिया कि वह शायद कुछ ऐसी चीज़ की तलाश कर रहा था जिसमें एम्परसेंड सिंटैक्स आपको वर्णित हो जो Sass में नियमित रूप से उपयोग किया जाता है। हालाँकि, OP के उदाहरण के लिए इसका निर्माण किया गया .item { &a }है। मान्य नहीं है और इसे संकलित.itema करना होगा । जैसा मैंने अपने उत्तर में कहा है। क्या मुझे कुछ याद आ रहा है?
.item { a& { ... } }जिसे अब @Blaine के साथ बताया जा सके .item { @at-root a#{&} { ... } }। मुद्दा यह है कि यदि आपके पास तत्व पर एक वर्ग है तो .item { &.class { ... } }ऐसा करना आसान है, तो आपको कच्चे html तत्व के साथ ऐसा करने में सक्षम क्यों नहीं होना चाहिए। सिर्फ इसलिए कि ऐसा करने का कोई तरीका नहीं था क्योंकि ओपी ने जिस समय पोस्ट किया था, इसका मतलब यह नहीं है कि वह वास्तव में ऐसा करने के लिए कार्यक्षमता चाहते थे।
AFAIK यदि आप एक ही समय में कक्षा और टैग के लिए एम्परसेंड को जोड़ना चाहते हैं, तो आपको इस सिंटैक्स का उपयोग करने की आवश्यकता है:
.c1 {
@at-root h1#{&},
h2#{&}
&.c2, {
color: #aaa;
}
}
को संकलित करेंगे
h1.c1,
h2.c1,
.c1.c2 {
color: #aaa;
}
अन्य उपयोग (जैसे पहले कक्षा @at-rootका उपयोग करना या एकाधिक का उपयोग करना)@at-root एस ) त्रुटियों को जन्म देगा।
आशा है कि यह उपयोगी होगा
#{&}यह मूल रूप से संकलक को बरगला रहा है - या यह हमेशा भविष्य में काम करेगा !?
#{}की हर चीज का मूल्यांकन किया जाता है। इसके अलावा &वर्तमान चयनकर्ता का मतलब है। इसलिए #{&}इसका मूल्यांकन किया जाता है .c1।
यह फीचर सैस के नवीनतम संस्करण में उतरा है, 3.3.0.rc.1(Maptastic Maple)
दो निकट संबंधी विशेषताएं जो आपको उपयोग करने की आवश्यकता होगी &, वे स्क्रिप्ट योग्य हैं , जिन्हें आप मूल तत्वों को संदर्भित करने के लिए एक नेस्टेड शैलियों के भीतर प्रक्षेपित कर सकते हैं, और @at-rootनिर्देश, जो तुरंत चयनकर्ता या सीएसएस के ब्लॉक को रूट पर रखता है (यह नहीं होगा आउटपुट सीएसएस में कोई भी माता-पिता हैं)
अधिक जानकारी के लिए इस Github मुद्दे को देखें