SASS वेरिएबल्स
यह लेख SASS वेरिएबल्स को समझाता है।
हम SASS वेरिएबल्स का विस्तृत विवरण देंगे और चरण दर चरण उनके वास्तविक उपयोग को जानेंगे।
YouTube Video
SASS वेरिएबल्स
SASS एक CSS एक्सटेंशन भाषा है जो आपको CSS को और अधिक लचीले और प्रभावी तरीके से लिखने की अनुमति देती है। इसके फीचर्स में, वेरिएबल्स एक शक्तिशाली टूल हैं जो स्टाइल की एकरूपता बनाए रखते हैं और बदलावों को आसान बनाते हैं।
SASS वेरिएबल्स क्या हैं?
SASS वेरिएबल्स एक तरीका प्रदान करते हैं जिससे आप रंग, फ़ॉन्ट साइज, और स्पेसिंग जैसी बार-बार इस्तेमाल होने वाली मानों को एक ही जगह प्रबंधित कर सकते हैं।
वेरिएबल्स का उपयोग करके आप स्टाइल्स को आसानी से बदल सकते हैं और कोड की पठनीयता बढ़ा सकते हैं।
वेरिएबल्स कैसे लिखें
वेरिएबल्स को निम्नलिखित तरीके से लिखा जा सकता है।
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- आपको वेरिएबल नाम के पहले
$सिंबल लगाना आवश्यक है। variable-nameवेरिएबल का नाम है। इसे स्पष्ट और विवरणात्मक नाम देना अनुशंसित है।valueवेरिएबल को दी गई मान है।
वेरिएबल्स का मूल उपयोग
नीचे SASS वेरिएबल का एक मूल उदाहरण दिया गया है।
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}- जब आप एक वेरिएबल जैसे
$primary-colorको परिभाषित कर देते हैं, तो आप उस मान का जितनी बार चाहें उतनी बार उपयोग कर सकते हैं। - जब आप कोई मान बदलना चाहते हैं, तो केवल वेरिएबल की परिभाषा बदलें—इससे रखरखाव आसान हो जाता है।
जनरेट किया गया CSS आउटपुट
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}नेस्टिंग के अंदर वेरिएबल्स का उपयोग
SASS नेस्टिंग को वेरिएबल्स के साथ मिलाकर उपयोग करने से आपका कोड व्यवस्थित रहता है और प्रबंधन आसान होता है।
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- आपनेस्टेड सेलेक्टर्स के भीतर भी वेरिएबल्स को इस्तेमाल कर सकते हैं।
- वेरिएबल्स को मिलाकर, आप लचीला स्टाइलिंग कर सकते हैं, जैसे कि
color.adjustफ़ंक्शन का उपयोग करके किसी रंग को 10% गहरा बनाना।
जनरेट किया गया CSS आउटपुट
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}डिफॉल्ट मान वाले वेरिएबल्स
SASS में, आप वेरिएबल्स के लिए डिफॉल्ट मान सेट कर सकते हैं। डिफॉल्ट मान सेट करने से आप मौजूदा वेरिएबल्स को ओवरराइट किए बिना उनका उपयोग कर सकते हैं।
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}!defaultजोड़ने पर वेरिएबल पहले से परिभाषित है तो वह ओवरराइट नहीं होगा।- यह टीम डेवलपमेंट या प्रोजेक्ट-स्तरीय सेटिंग्स में उपयोगी है।
जनरेट किया गया CSS आउटपुट
1p {
2 font-size: 16px;
3}वेरिएबल स्कोप
SASS वेरिएबल्स का स्कोप होता है, और उनकी उपलब्धता इस पर निर्भर करती है कि वे कहाँ परिभाषित हैं। स्कोप को समझने से वेरिएबल्स का अनचाहा ओवरराइटिंग रोका जा सकता है।
- ग्लोबल स्कोप
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- ग्लोबल स्कोप में वेरिएबल्स पूरी फाइल में उपलब्ध होते हैं।
- लोकल स्कोप
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- लोकल स्कोप में वेरिएबल्स केवल एक विशेष नेस्टिंग या फाइल के भीतर ही उपलब्ध होते हैं।
गणनाओं में वेरिएबल्स का उपयोग
SASS वेरिएबल्स का उपयोग गणनाओं में भी किया जा सकता है। गणनाएं यूनिट-आधारित मान और रंगों पर भी की जा सकती हैं।
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}जनरेट किया गया CSS आउटपुट
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- रंग समायोजन या स्पेसिंग की गणना हेतु वेरिएबल्स का उपयोग रखरखाव को बेहतर बनाता है।
सारांश
SASS वेरिएबल्स कुशल CSS प्रबंधन और रखरखाव के लिए एक अनिवार्य सुविधा हैं।
SASS वेरिएबल्स का उपयोग पूरे प्रोजेक्ट में एकसमान स्टाइल बनाए रखने और बदलाव को आसान बनाने में मदद करता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।