SASS में नेस्टिंग
यह लेख SASS में नेस्टिंग को समझाता है।
हम SASS नेस्टिंग को चरण दर चरण समझाएंगे, और आपकी समझ को गहरा करने के लिए उदाहरण कोड भी शामिल करेंगे।
YouTube Video
SASS में नेस्टिंग
SASS CSS के लिए एक विस्तारित स्टाइलशीट भाषा है, जो कुशल स्टाइलिंग हेतु कई विशेषताएँ प्रदान करती है। इनमें से, नेस्टिंग एक विशेष रूप से उपयोगी सुविधा है, जो CSS की अनुक्रमिक संरचना को दृश्यमान रूप से दर्शाती है।
नेस्टिंग की मूल बातें
SASS में, आप अपने कोड को अनुक्रमिक संरचना में CSS सिलेक्टर्स लिखकर सुव्यवस्थित कर सकते हैं। उदाहरण के लिए, आइए देखें कि आप निम्नलिखित CSS कोड को नेस्टिंग का उपयोग करके कैसे लिख सकते हैं।
1/* CSS */
2.nav {
3 background-color: #333;
4}
5.nav ul {
6 margin: 0;
7 padding: 0;
8}
9.nav ul li {
10 list-style: none;
11}
12.nav ul li a {
13 color: #fff;
14 text-decoration: none;
15}SASS का उपयोग करके, आप इस कोड को नेस्टिंग के साथ संक्षेप में नीचे दिखाए अनुसार लिख सकते हैं।
1/* SASS */
2.nav {
3 background-color: #333;
4
5 ul {
6 margin: 0;
7 padding: 0;
8
9 li {
10 list-style: none;
11
12 a {
13 color: #fff;
14 text-decoration: none;
15 }
16 }
17 }
18}- यह कोड SASS में नेस्टिंग का उपयोग करके नेविगेशन मेन्यू स्टाइल्स को संक्षिप्त और अनुक्रमिक रूप से दर्शाता है। नेस्टिंग का उपयोग करने से, पेरेंट-चाइल्ड संबंध स्पष्ट दिखते हैं और पठनीयता बेहतर होती है।
पैरेंट सिलेक्टर का संदर्भ लेना (&)
जब आपको नेस्टेड स्टाइल्स में पैरेंट सिलेक्टर का संदर्भ लेना हो, तो & का उपयोग करें। यह आपको विशिष्ट स्थितियों या मोडिफायर के साथ सिलेक्टर बनाने की अनुमति देता है।
1.button {
2 background-color: #007bff;
3 color: #fff;
4
5 &:hover {
6 background-color: #0056b3;
7 }
8
9 &:active {
10 background-color: #003f7f;
11 }
12}- यह कोड SCSS में
&का उपयोग करके मूल.buttonसिलेक्टर के लिए:hoverऔर:activeस्थितियों को परिभाषित करता है।
निर्मित CSS
1.button {
2 background-color: #007bff;
3 color: #fff;
4}
5.button:hover {
6 background-color: #0056b3;
7}
8.button:active {
9 background-color: #003f7f;
10}मीडिया क्वेरीज़ की नेस्टिंग
SASS में, आप मीडिया क्वेरीज़ को भी नेस्ट कर सकते हैं। यह आपको अपनी स्टाइल्स की प्रासंगिकता बनाए रखते हुए, रिस्पॉन्सिव डिज़ाइन को लागू करने की अनुमति देता है।
1.container {
2 width: 100%;
3
4 @media (min-width: 768px) {
5 width: 750px;
6 }
7
8 @media (min-width: 1024px) {
9 width: 970px;
10 }
11}- यह कोड
.containerक्लास के भीतर एक मीडिया क्वेरी को नेस्ट करता है, जिससे स्क्रीन साइज़ के अनुसार चौड़ाई बदलने वाला रिस्पॉन्सिव डिज़ाइन संभव होता है।
निर्मित CSS
1.container {
2 width: 100%;
3}
4@media (min-width: 768px) {
5 .container {
6 width: 750px;
7 }
8}
9@media (min-width: 1024px) {
10 .container {
11 width: 970px;
12 }
13}नेस्टिंग के बारे में ध्यान देने योग्य बातें
बहुत अधिक नेस्टिंग आपके कोड को अत्यधिक स्तरित बना सकती है और अनुरक्षणीयता को घटा सकती है। आपको नीचे दिए गए उदाहरण जैसी गहरी नेस्टिंग से बचना चाहिए।
1.header {
2 .nav {
3 ul {
4 li {
5 a {
6 color: red;
7 }
8 }
9 }
10 }
11}इस प्रकार का कोड बहुत अधिक गहराई तक नेस्टेड है, इसलिए इसे निम्नलिखित तरीके से पुनः संरचित किया जा सकता है।
1.header .nav ul li a {
2 color: red;
3}व्यावहारिक उदाहरण: नेविगेशन बार
नीचे SASS नेस्टिंग का उपयोग करके नेविगेशन बार की स्टाइलिंग का एक उदाहरण दिया गया है।
1.navbar {
2 background-color: #222;
3 color: #fff;
4
5 ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10
11 li {
12 margin-right: 15px;
13
14 a {
15 color: #fff;
16 text-decoration: none;
17
18 &:hover {
19 text-decoration: underline;
20 }
21 }
22 }
23 }
24}- यह कोड SASS नेस्टिंग का उपयोग करके नेविगेशन बार के अंदर लिस्ट्स और लिंक्स के लिए स्टाइल्स (होवर इफेक्ट्स सहित) को व्यवस्थित और परिभाषित करता है।
निर्मित CSS
1.navbar {
2 background-color: #222;
3 color: #fff;
4}
5.navbar ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11.navbar ul li {
12 margin-right: 15px;
13}
14.navbar ul li a {
15 color: #fff;
16 text-decoration: none;
17}
18.navbar ul li a:hover {
19 text-decoration: underline;
20}सारांश
SASS में नेस्टिंग फीचर CSS की अनुक्रमिक संरचना को संक्षिप्त रूप में व्यक्त करने और पठनीयता बढ़ाने के लिए एक शक्तिशाली उपकरण है। हालांकि, अत्यधिक नेस्टिंग से बचना और अपने कोड को उचित रूप से व्यवस्थित करना महत्वपूर्ण है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।