SASS में स्ट्रिंग्स

यह लेख SASS में स्ट्रिंग्स की व्याख्या करता है।

हम SASS में बेसिक स्ट्रिंग ऑपरेशन्स से लेकर एडवांस्ड इस्तेमाल तक को स्टेप-बाय-स्टेप समझाएंगे।

YouTube Video

SASS में स्ट्रिंग्स

SASS CSS को बढ़ाने के लिए एक प्री-प्रोसेसर है, और स्ट्रिंग्स स्टाइल डिफ़िनिशन को अधिक लचीला और डायनामिक बनाने के लिए आवश्यक तत्व हैं।

स्ट्रिंग्स की मूल बातें

SASS में स्ट्रिंग्स को सिंगल या डबल कोट्स में लिखा जा सकता है, और कुछ मामलों में कोट्स छोड़कर उन्हें identifiers की तरह भी लिखा जा सकता है। नीचे इन्हें लिखने के बेसिक उदाहरण दिए गए हैं।

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

नोट्स

• कोटेड स्ट्रिंग्स को सीधे स्ट्रिंग लिट्रल्स के रूप में लिया जाता है।
• अनकोटेड स्ट्रिंग्स को अक्सर CSS identifiers जैसे क्लास नाम या ID के रूप में ट्रीट किया जाता है, इसलिए इनका सावधानी से और उपयुक्त तरीके से इस्तेमाल करें।

स्ट्रिंग संयोजन (Concatenation)

SASS में, आप + ऑपरेटर का उपयोग करके स्ट्रिंग्स को जोड़ सकते हैं।

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• यह कोड SASS में + ऑपरेटर का उपयोग करके कई स्ट्रिंग्स को जोड़ने और एक नई स्ट्रिंग बनाने का उदाहरण है।

एडवांस्ड उदाहरण: क्लास नाम जनरेट करना

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• यह कोड SASS में + ऑपरेटर का उपयोग करके एक बेस क्लास नाम और मॉडिफायर जोड़कर नया क्लास नाम बनाने का उदाहरण है।

स्ट्रिंग फंक्शन्स का उपयोग

SASS विभिन्न स्ट्रिंग ऑपरेशन्स (जैसे कोट कंट्रोल और सबस्ट्रिंग एक्सट्रैक्शन) के लिए इनबिल्ट सुविधा देता है।

quote() और unquote()

quote() और unquote() फंक्शन्स के माध्यम से आप स्ट्रिंग्स में कोट जोड़ या हटा सकते हैं।

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

str-length() फंक्शन स्ट्रिंग की लंबाई प्राप्त करता है।

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

str-insert() फंक्शन से आप किसी निर्धारित स्थान पर स्ट्रिंग जोड़ सकते हैं।

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

str-slice() फंक्शन किसी स्ट्रिंग का हिस्सा निकालता है।

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() और to-lower-case()

to-upper-case() और to-lower-case() फंक्शन्स किसी स्ट्रिंग को ऊपरी या निचले केस में बदलते हैं।

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

कंडीशनल लॉजिक में स्ट्रिंग्स

SASS के @if डायरेक्टिव का उपयोग करके, आप स्ट्रिंग वैल्यू के आधार पर कंडीशनल ब्रांचिंग और थीम या सेटिंग्स के अनुसार स्टाइल्स लचीले तरीके से बदल सकते हैं।

 1$theme: "dark";
 2
 3@if $theme == "dark" {
 4  body {
 5    background-color: black;
 6    color: white;
 7  }
 8} @else {
 9  body {
10    background-color: white;
11    color: black;
12  }
13}

• यह कोड SASS में @if डायरेक्टिव का उपयोग करके जांचता है कि थीम ‘dark’ है या नहीं, और उसी के अनुसार स्टाइल्स बदलता है।

व्यावहारिक उदाहरण: डायनामिक बैकग्राउंड इमेज पाथ जनरेट करना

नीचे स्ट्रिंग मैनिप्युलेशन का उपयोग कर बैकग्राउंड इमेज URL बनाने का उदाहरण है।

1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6    background-image: url($image-path + $image-name + $image-extension);
7}

कंपाइल्ड परिणाम

1.background {
2    background-image: url("/images/background.jpg");
3}

• यह कोड SASS में स्ट्रिंग्स को जोड़कर डायनामिक रूप से बैकग्राउंड इमेज का पाथ जेनरेट करने और इसे बैकग्राउंड के रूप में लगाने का उदाहरण है।

लिस्ट्स और मैप्स के साथ संयोजन

SASS लिस्ट्स और मैप्स को स्ट्रिंग ऑपरेशन्स के साथ मिलाकर, आप स्टाइल्स को और अधिक लचीले तरीके से जनरेट कर सकते हैं।

लिस्ट उदाहरण

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

कंपाइल्ड परिणाम

1.btn-hover {
2    content: "Button in hover state";
3}
4.btn-focus {
5    content: "Button in focus state";
6}
7.btn-active {
8    content: "Button in active state";
9}

• यह कोड SASS में @each डायरेक्टिव का उपयोग करके लिस्ट के हर स्टेट के लिए क्लास बनाने और स्ट्रिंग्स जोड़कर कंटेंट डायनामिक रूप से सेट करने का उदाहरण है।

मैप उदाहरण

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

कंपाइल्ड परिणाम

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• यह कोड SASS के मैप का उपयोग करके रंग नामों को मानों के साथ जोड़ने और @each डायरेक्टिव से प्रत्येक क्लास को डायनामिक रूप से बनाने का उदाहरण है।

स्ट्रिंग्स को एस्केप करना

कुछ स्ट्रिंग्स को CSS identifiers के रूप में सुरक्षित उपयोग के लिए एस्केप करना आवश्यक हो सकता है।

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

कंपाइल्ड परिणाम

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• यह कोड एक उदाहरण है जिसमें एक विशेष अक्षरों वाली स्ट्रिंग को SASS में एक वेरिएबल के रूप में माना गया है, उसे #{$variable} के साथ विस्तारित किया गया है, और उसे CSS में एक वैध क्लास नाम के रूप में उपयोग किया गया है।

निष्कर्ष

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

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video