नेस्टिंग में संयोजक
यह लेख नेस्टिंग में प्रयुक्त संयोजकों के बारे में बताता है।
हम आपको बतायेंगे कि SASS में नेस्टिंग के साथ संयोजकों का उपयोग कैसे करें और आपकी समझ के लिए स्टेप-बाय-स्टेप नमूना कोड भी देंगे।
YouTube Video
नेस्टिंग में संयोजक
SASS में, आप पैरेंट-चाइल्ड संबंधों के आधार पर CSS चयनकर्ता संक्षिप्त रूप से लिख सकते हैं, लेकिन वंशज और आसन्न चयनकर्ता जैसे संयोजकों को सही प्रकार से संभालने के लिए विशेष ध्यान देना आवश्यक है।
नेस्टिंग की मूल बातें
SASS में, चाइल्ड चयनकर्ताओं को पैरेंट चयनकर्ताओं के अंदर नेस्टिंग करके, आप CSS में पैरेंट-चाइल्ड संबंधों को स्पष्ट और संक्षिप्त रूप से दिखा सकते हैं।
उदाहरण: मूल नेस्टिंग
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}कंपाइल किया गया CSS
1.nav ul li {
2 color: blue;
3}पैरेंट चयनकर्ता संदर्भ (&)
SASS में & का उपयोग वर्तमान पैरेंट चयनकर्ता को संदर्भित करने के लिए किया जाता है।
संयोजकों और & को जोड़ना
& का उपयोग करके आप लचीले चयनकर्ता बना सकते हैं।
नमूना
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}कंपाइल किया गया CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}& के लिए संक्षिप्त संकेत
SASS में, जब कोई संयोजक किसी चयनकर्ता की शुरुआत में रखा जाता है, तो पैरेंट चयनकर्ता स्वतः जोड़ दिया जाता है, इसलिए आप & को छोड़ सकते हैं।
जिन मामलों में छोड़ा जा सकता है
उदाहरण के लिए, जब आप + .item लिखते हैं, तो SASS इसे आंतरिक रूप से & + .item के रूप में समझता है और अपने आप पैरेंट चयनकर्ता के साथ इसका संयोजन बना देता है।
नमूना
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}कंपाइल किया गया CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}संयोजकों का अवलोकन
CSS संयोजक चयनकर्ताओं के बीच संबंध को परिभाषित करते हैं। नीचे मुख्य प्रकार के संयोजक दिए गए हैं।
-
वंशज चयनकर्ता (स्पेस) वंशज चयनकर्ता, किसी पैरेंट एलिमेंट के अंदर मौजूद सभी वंशज एलिमेंट्स को लक्षित करता है। उदाहरण:
.parent .child -
चाइल्ड चयनकर्ता (
>) चाइल्ड चयनकर्ता केवल सीधा चाइल्ड एलिमेंट को ही लक्षित करता है। उदाहरण:.parent > .child -
आसन्न चयनकर्ता (
+) आसन्न चयनकर्ता तुरंत बाद में आने वाले भाई-बहन एलिमेंट को लक्षित करता है। उदाहरण:.sibling1 + .sibling2 -
सामान्य सिब्लिंग चयनकर्ता (
~) सामान्य सिब्लिंग चयनकर्ता आगे आने वाले सभी सिब्लिंग एलिमेंट्स को लक्षित करता है। उदाहरण:.sibling1 ~ .sibling2
SASS में संयोजकों का उपयोग कैसे करें
वंशज चयनकर्ता (स्पेस)
SASS नेस्टिंग में, स्पेस (वंशज चयनकर्ता) डिफ़ॉल्ट रूप से लागू होता है।
नमूना
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}कंपाइल किया गया CSS
1.container .header .title {
2 font-size: 20px;
3}चाइल्ड चयनकर्ता (> )
अगर आप चाइल्ड चयनकर्ता का उपयोग करना चाहते हैं तो अपने SASS कोड में स्पष्ट रूप से > लिखें।
नमूना
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}कंपाइल किया गया CSS
1.container > .header > .title {
2 font-size: 20px;
3}आसन्न चयनकर्ता (+)
तुरंत बाद वाले सिब्लिंग एलिमेंट को स्टाइल करने के लिए + का उपयोग करें।
नमूना
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}कंपाइल किया गया CSS
1.item + .item {
2 margin-top: 10px;
3}सामान्य सिब्लिंग चयनकर्ता (~)
एक ही स्तर पर आगे आने वाले सभी सिब्लिंग्स को स्टाइल देने के लिए ~ का उपयोग करें।
नमूना
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}कंपाइल किया गया CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}नेस्टिंग के साथ स्यूडो-क्लासेज़ और स्यूडो-एलिमेंट्स
SASS में स्यूडो-क्लासेज़ और स्यूडो-एलिमेंट्स को भी आसानी से लिखा जा सकता है।
नमूना
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}कंपाइल किया गया CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}व्यावहारिक नमूना
नीचे कई संयोजकों को जोड़कर बनाए गए जटिल स्टाइल का एक उदाहरण दिया गया है।
SASS कोड
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}कंपाइल किया गया CSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}सारांश
अगर आप SASS में नेस्टिंग और संयोजकों को सही तरीके से समझते हैं, तो आप अधिक संक्षिप्त और पठनीय CSS लिख सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।