SASS `@at-root`
यह लेख SASS के @at-root को समझाता है।
हम @at-root के बुनियादी उपयोग से लेकर उन्नत उदाहरणों तक, चरण-दर-चरण सब कुछ कवर करेंगे।
YouTube Video
SASS @at-root के बारे में
@at-root SASS द्वारा प्रदत्त एक निर्देश (directive) है, जिसका उपयोग नेस्टेड सेलेक्टर्स या प्रॉपर्टीज़ को वर्तमान नेस्टिंग से पैरेंट स्कोप में ले जाने के लिए किया जाता है। इस फीचर का लाभ उठाकर, आप नेस्टिंग की गहराई को नियंत्रित कर सकते हैं और इच्छित CSS को अधिक कुशलता से जेनरेट कर सकते हैं।
@at-root का बुनियादी उपयोग
SASS की नेस्टिंग कोड को अधिक पठनीय बनाती है, लेकिन अत्यधिक गहरी नेस्टिंग से अनचाहा CSS जेनरेट हो सकता है। @at-root का उपयोग करके, आप विशिष्ट कोड ब्लॉक्स को नेस्टिंग संरचना से बाहर कर सकते हैं।
मूल वाक्यविन्यास
1@at-root {
2 // Code to be output at the parent (root) scope
3}उदाहरण उपयोग
1.nav {
2 color: blue;
3 @at-root {
4 .nav-item {
5 color: red;
6 }
7 }
8}कम्पाइल किया गया CSS
1.nav {
2 color: blue;
3}
4.nav-item {
5 color: red;
6}@at-rootके कारण,.nav-itemको.navके बाहर आउटपुट किया जाता है।
नेस्टेड सेलेक्टर्स में @at-root
गहरी नेस्टिंग के भीतर भी, @at-root का उपयोग करके आप विशिष्ट सेलेक्टर्स को रूट स्तर पर ले जा सकते हैं। इससे आप जटिल संरचनाओं के भीतर भी नियंत्रित CSS आउटपुट कर सकते हैं।
उदाहरण उपयोग
1.card {
2 background: white;
3 .card-header {
4 color: black;
5 @at-root .card-title {
6 font-size: 20px;
7 }
8 }
9}कम्पाइल किया गया CSS
1.card {
2 background: white;
3}
4.card .card-header {
5 color: black;
6}
7.card-title {
8 font-size: 20px;
9}@at-rootका उपयोग करने पर,.card-titleको.card-headerके बाहर आउटपुट किया जाता है।
आर्गुमेंट्स के साथ @at-root
आर्गुमेंट्स निर्दिष्ट करके, @at-root को अधिक लचीले ढंग से नियंत्रित किया जा सकता है।
without आर्गुमेंट
जब आप without आर्गुमेंट का उपयोग करते हैं, तो आउटपुट निर्दिष्ट स्कोप्स को नज़रअंदाज़ कर देता है। दूसरे शब्दों में, आप पैरेंट नियमों या मीडिया क्वेरीज़ को हटा सकते हैं।
उदाहरण उपयोग
1.nav {
2 @media (min-width: 768px) {
3 &__item {
4 @at-root (without: media) {
5 color: red;
6 }
7 }
8 }
9}कम्पाइल किया गया CSS
1.nav__item {
2 color: red;
3}- इस स्थिति में,
@at-root (without: media)मीडिया क्वेरी स्कोप को बाहर कर देता है, और.nav__itemरूट पर आउटपुट होता है।
with आर्गुमेंट
with का उपयोग करने पर आउटपुट में केवल निर्दिष्ट स्कोप्स ही बने रहते हैं। जब आप कुछ विशेष स्कोप्स को बनाए रखते हुए रूट पर आउटपुट करना चाहें, तब यह उपयोगी है।
उदाहरण उपयोग
1.nav {
2 &__item {
3 @media (min-width: 768px) {
4 @at-root (with: media) {
5 &-large {
6 font-size: 18px;
7 }
8 }
9 }
10 }
11}कम्पाइल किया गया CSS
1@media (min-width: 768px) {
2 .nav__item-large {
3 font-size: 18px;
4 }
5}@at-root (with: media)मीडिया क्वेरी संरचना को बनाए रखते हुए सेलेक्टर को रूट पर ले जाता है।
एकाधिक शर्तें निर्दिष्ट करना
आप एक ही समय में स्पेस द्वारा अलग किए गए कई स्कोप भी निर्दिष्ट कर सकते हैं।
उदाहरण उपयोग
1.wrapper {
2 @media (min-width: 600px) {
3 @at-root (without: rule media) {
4 .global-style {
5 color: green;
6 }
7 }
8 }
9}कम्पाइल किया गया CSS
1.global-style {
2 color: green;
3}- इस उदाहरण में,
rule(साधारण सेलेक्टर्स) औरmedia(मीडिया क्वेरीज़) दोनों को बाहर किया गया है, इसलिए.global-styleकिसी भी स्कोप से संबंधित नहीं रहती और पूरी तरह रूट स्तर पर आउटपुट होती है। यह तब उपयोगी है जब आप जटिल नेस्टिंग के भीतर भी जानबूझकर ग्लोबल स्टाइल्स परिभाषित करना चाहते हैं।
मीडिया क्वेरीज़ के साथ संयोजन
@at-root का उपयोग करके, आप मीडिया क्वेरीज़ के भीतर से रूट-लेवल स्टाइल्स आउटपुट कर सकते हैं। यह आपको कंपोनेंट स्तर पर रेस्पॉन्सिव डिज़ाइन परिभाषित करने देता है।
उदाहरण उपयोग
1.container {
2 @media (min-width: 768px) {
3 @at-root {
4 .container-large {
5 width: 80%;
6 }
7 }
8 }
9}कम्पाइल किया गया CSS
1.container-large {
2 width: 80%;
3}@at-rootका उपयोग करके, आप मीडिया क्वेरीज़ के भीतर से भी रूट-स्तर की स्टाइल्स आउटपुट कर सकते हैं। इससे प्रत्येक ब्रेकपॉइंट के लिए स्वतंत्र ग्लोबल स्टाइल्स परिभाषित करना आसान हो जाता है।
@at-root के उपयोग के मामले
@at-root तब उपयोगी है जब आप विशिष्ट परिस्थितियों में रूट स्तर पर स्टाइल्स आउटपुट करना चाहते हैं। यह विशेष रूप से तब मददगार है जब आप कंपोनेंट्स के भीतर मीडिया क्वेरीज़ या थीम-विशिष्ट स्टाइल्स संभाल रहे हों।
कंपोनेंट्स और थीम्स को अलग करना
@at-root का उपयोग करके, आप मीडिया क्वेरीज़ के भीतर से भी स्वतंत्र ग्लोबल क्लासेस जेनरेट कर सकते हैं। इससे प्रति कंपोनेंट थीम्स और स्टेट्स को व्यवस्थित करना आसान हो जाता है।
उदाहरण उपयोग
1.card {
2 background: white;
3 color: black;
4
5 @media (prefers-color-scheme: dark) {
6 @at-root (with: media) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11 }
12 }
13}कम्पाइल किया गया CSS
1.card {
2 background: white;
3 color: black;
4}
5
6@media (prefers-color-scheme: dark) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11}- इस उदाहरण में,
.cardके अंदर डार्क थीम के लिए स्टाइल्स परिभाषित करते समय,@at-rootएक अलग.card-darkक्लास जेनरेट करता है। इससे आप विभिन्न थीम्स के बीच क्लासेस को लचीले ढंग से स्विच कर सकते हैं।
नोट्स
@at-root का उपयोग करते समय, निम्नलिखित बातों का ध्यान रखें।
-
अत्यधिक उपयोग से बचें
@at-rootशक्तिशाली है, लेकिन इसका अधिक उपयोग आपकी नेस्टिंग के उद्देश्य को अस्पष्ट कर सकता है। -
उद्देश्य स्पष्ट रखें
@at-rootका उपयोग क्यों कर रहे हैं, इस बारे में टिप्पणियाँ छोड़ने से अन्य डेवलपर्स के लिए समझना आसान हो जाता है। -
स्कोप की सुसंगतता का ध्यान रखें आउटपुट को रूट पर ले जाने से स्टाइल निर्भरताएँ बदल सकती हैं। यह किन एलिमेंट्स पर लागू होता है, इसे स्पष्ट रखें।
-
अन्य SASS फीचर्स के साथ संयोजन करें
@at-rootको@mixinऔर@functionके साथ मिलाने से अधिक लचीला CSS डिज़ाइन संभव होता है।
सारांश
{^ i18n_speak
@at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।