नेटिव सीएसएस और सैस नेस्टिंग के बीच अंतर

लॉन्च होने के बाद से, सीएसएस ने नेस्टिंग चयनकर्ताओं के लिए सिंटैक्स का समर्थन करने से दृढ़तापूर्वक इनकार कर दिया है। विकल्प हमेशा Sass जैसे CSS प्रीप्रोसेसर का उपयोग करना रहा है। लेकिन आज, नेस्टिंग आधिकारिक तौर पर देशी सीएसएस का हिस्सा है। आप इस सुविधा को सीधे आधुनिक ब्राउज़र में आज़मा सकते हैं।

यदि आप सैस से पलायन कर रहे हैं, तो आपको देशी नेस्टिंग और सैस नेस्टिंग के बीच किसी भी अंतर को ध्यान में रखना होगा। दोनों नेस्टिंग सुविधाओं के बीच कुछ महत्वपूर्ण अंतर हैं, और यदि आप स्विच कर रहे हैं तो उनके बारे में जागरूक होना महत्वपूर्ण है।

आपको नेटिव सीएसएस में तत्व चयनकर्ताओं के साथ "&" का उपयोग करने की आवश्यकता है

सीएसएस नेस्टिंग अभी भी अलग-अलग ब्राउज़र समर्थन के साथ एक ड्राफ्ट विनिर्देश है। जैसी साइटों की जांच करना सुनिश्चित करें caniuse.com नवीनतम जानकारी के लिए.

एससीएसएस सिंटैक्स का उपयोग करते हुए आप सैस में जिस प्रकार की नेस्टिंग देखेंगे उसका एक उदाहरण यहां दिया गया है:

.nav {
ul { display: flex; }
a { color: black; }
}

यह सीएसएस ब्लॉक निर्दिष्ट करता है कि किसी तत्व के अंदर कोई भी अव्यवस्थित सूची एनएवी क्लास एक फ्लेक्स कॉलम के रूप में संरेखित होती है, एक तरह से पृष्ठ पर HTML तत्वों को रखना. इसके अलावा, सभी एंकर टेक्स्ट को तत्वों के अंदर लिंक करते हैं एनएवी कक्षा काली होनी चाहिए.

अब, मूल सीएसएस में, उस प्रकार की नेस्टिंग अमान्य होगी। इसे काम करने के लिए, आपको नेस्टेड तत्वों के सामने एम्परसेंड प्रतीक (&) को शामिल करना होगा, जैसे:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

सीएसएस नेस्टिंग के शुरुआती संस्करण में प्रकार चयनकर्ताओं को नेस्ट करने की अनुमति नहीं थी। हाल के बदलाव का मतलब है कि अब आपको "&" का उपयोग नहीं करना होगा, लेकिन क्रोम और सफारी के पुराने संस्करण अभी तक इस अद्यतन सिंटैक्स का समर्थन नहीं कर सकते हैं।

अब यदि आप एक ऐसे चयनकर्ता का उपयोग कर रहे थे जो एक प्रतीक (उदाहरण के लिए वर्ग चयनकर्ता) से शुरू होता है पृष्ठ के किसी विशिष्ट भाग को लक्षित करें, आप एम्परसेंड को छोड़ सकते हैं। तो निम्नलिखित सिंटैक्स मूल CSS और Sass दोनों में काम करेगा:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

आप नेटिव सीएसएस में "&" का उपयोग करके एक नया चयनकर्ता नहीं बना सकते

सैस की एक विशेषता जो शायद आपको पसंद हो, वह है कुछ इस तरह करने की क्षमता:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

यह Sass कोड निम्नलिखित कच्चे CSS में संकलित होता है:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

मूल सीएसएस में, आप "&" का उपयोग करके एक नया चयनकर्ता नहीं बना सकते। सैस कंपाइलर "&" को मूल तत्व से बदल देता है (उदा. .एनएवी), लेकिन मूल सीएसएस "&" और उसके बाद के भाग को दो अलग-अलग चयनकर्ताओं के रूप में मानेगा। परिणामस्वरूप, यह एक कंपाउंड चयनकर्ता बनाने का प्रयास करेगा, जो समान परिणाम नहीं देगा।

हालाँकि, यह उदाहरण मूल CSS में काम करेगा:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

यह काम करता है क्योंकि पहला चयनकर्ता वही है nav.nav-सूची सादे सीएसएस में, और दूसरा भी वैसा ही है nav.nav-लिंक. "&" और चयनकर्ता के बीच एक स्थान जोड़ना लिखने के बराबर होगा एनएवी .एनएवी-सूची.

देशी सीएसएस में, यदि आप एम्परसेंड का उपयोग इस प्रकार करते हैं:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

यह इसे लिखने जैसा ही है:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

यह आपके लिए आश्चर्य की बात हो सकती है, यह देखते हुए कि दोनों __एनएवी-सूची और __एनएवी-लिंक के अंदर हैं .एनएवी चयनकर्ता. लेकिन एम्परसेंड वास्तव में नेस्टेड तत्वों को मूल तत्व के सामने रखता है।

विशिष्टता भिन्न हो सकती है

ध्यान देने योग्य एक और बात विशिष्टता पर प्रभाव है जो सैस में नहीं होता है लेकिन मूल सीएसएस नेस्टिंग में होता है।

तो मान लीजिए कि आपके पास एक और एक तत्व। निम्नलिखित सीएसएस के साथ, a इनमें से किसी भी तत्व में सेरिफ़ फ़ॉन्ट का उपयोग किया जाएगा:

#main, article {
h2 {
font-family: serif;
 }
}

उपरोक्त Sass कोड का संकलित संस्करण इस प्रकार है:

#mainh2,
articleh2 {
font-family: serif;
}

लेकिन मूल सीएसएस में समान नेस्टिंग सिंटैक्स एक अलग परिणाम देगा, प्रभावी रूप से वही:

:is(#main, article) h2 {
font-family: serif;
}

है() चयनकर्ता विशिष्टता नियमों को सैस नेस्टिंग से थोड़ा अलग तरीके से संभालता है। मूलतः, की विशिष्टता:है() प्रदान किए गए तर्कों की सूची में सबसे विशिष्ट आइटम के लिए स्वतः अपग्रेड हो जाता है।

तत्वों का क्रम चयनित तत्व को बदल सकता है

मूल सीएसएस में नेस्टिंग चयनकर्ता का वास्तव में क्या मतलब है उसे पूरी तरह से बदल सकता है (यानी एक पूरी तरह से अलग तत्व का चयन करता है)।

उदाहरण के लिए, निम्नलिखित HTML पर विचार करें:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

और निम्नलिखित सीएसएस:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

यदि आप Sass को CSS कंपाइलर के रूप में उपयोग करते हैं तो यह परिणाम है:

अब HTML ब्लॉक में, यदि आपको स्थानांतरित करना है की कक्षा के साथ काले विषय उसके अंदर कार्यवाई के लिए बुलावा, यह चयनकर्ता को तोड़ देगा (सैस मोड में)। लेकिन जब आप नियमित सीएसएस (यानी कोई सीएसएस प्रीप्रोसेसर नहीं) पर स्विच करते हैं, तो शैलियाँ काम करना जारी रखेंगी।

इसका कारण यह है कि जिस तरह से :है() हुड के नीचे काम करता है. तो उपरोक्त नेस्टेड सीएसएस निम्नलिखित सादे सीएसएस में संकलित होता है:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

यह एक निर्दिष्ट कर रहा है .शीर्षक वह दोनों का वंशज है .डार्क-थीम और ।कार्यवाई के लिए बुलावा. लेकिन इनका क्रम वास्तव में मायने नहीं रखता। जब तक .शीर्षक का वंशज है ।कार्यवाई के लिए बुलावा और .डार्क-थीम, यह किसी भी क्रम में काम करता है।

यह एक किनारे का मामला है और ऐसा कुछ नहीं है जिसका सामना आप अक्सर करेंगे। लेकिन समझना :है() चयनकर्ता की अंतर्निहित कार्यक्षमता आपको यह जानने में मदद कर सकती है कि सीएसएस में नेस्टिंग कैसे काम करती है। ये भी बनता है अपने सीएसएस को डिबग करना बहुत आसान।

प्रतिक्रिया में सैस का उपयोग करना सीखें

क्योंकि Sass CSS में संकलित होता है, आप इसे वस्तुतः किसी भी UI फ्रेमवर्क के साथ उपयोग कर सकते हैं। आप CSS प्रीप्रोसेसर को Vue, Preact, Svelte और—बेशक—React प्रोजेक्ट्स में इंस्टॉल कर सकते हैं। इन सभी ढाँचों के लिए Sass की सेटअप प्रक्रिया भी काफी सीधी है।

रिएक्ट में सैस का उपयोग करने का सबसे बड़ा फायदा यह है कि यह आपको वेरिएबल्स और मिक्सिन का उपयोग करके साफ, पुन: प्रयोज्य शैलियों को लिखने की सुविधा देता है। एक रिएक्ट डेवलपर के रूप में, सैस का उपयोग करने का तरीका जानने से आपको क्लीनर, अधिक कुशल कोड लिखने में मदद मिलेगी और आप कुल मिलाकर एक बेहतर डेवलपर बन जाएंगे।