SASS में ऑपरेटर
यह लेख SASS में ऑपरेटरों को समझाता है।
हम SASS में ऑपरेटरों को व्यावहारिक उदाहरणों के साथ समझाएंगे।
YouTube Video
SASS में ऑपरेटर
SASS ऑपरेटरों में संख्यात्मक ऑपरेशंस, तुलना ऑपरेशंस, लॉजिकल ऑपरेशंस और स्ट्रिंग हेरफेर शामिल हैं।
गणितीय संचालन (जोड़, घटाव, गुणा, भाग, शेषफल)
SASS मानक गणित का समर्थन करता है, लेकिन विभाजन / CSS के / के साथ भ्रमित होता है, इसलिए math.div() का उपयोग करने की सलाह दी जाती है। संख्याओं में यूनिट्स हो सकते हैं, और ऑपरेशंस केवल संगत यूनिट्स के बीच ही संभव हैं।
नीचे साधारण गणितीय संचालन और math मॉड्यूल के उपयोग के उदाहरण दिए गए हैं।
1@use "sass:math";
2
3$base: 16px;
4$gutter: 8px;
5
6/* Addition and multiplication (allowed since both units are px) */
7.container {
8 width: $base + $gutter * 3; // -> 40px
9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13 padding: math.div($base, 2); // -> 8px
14}- यह कोड
pxयूनिट के साथ जोड़ और गुणा, औरmath.div()का उपयोग करके भाग देने का एक उदाहरण है। 10px + 2emजैसी असंगत यूनिट्स त्रुटि या अनपेक्षित परिणाम देंगी। यूनिट्स को एकसमान करें याunit()औरunitless()फ़ंक्शंस का उपयोग करें।
यूनिट्स का प्रबंधन और स्वचालित रूपांतरण
SASS यूनिट्स के साथ संख्याओं को संभालता है, और गणना परिणामों के लिए यूनिट नियम सामान्य भौतिक नियमों का पालन करते हैं। उदाहरण के लिए, px/px यूनिट रहित (unitless) हो जाता है। unit() फ़ंक्शन का उपयोग करते समय या math.div() के बाद यूनिट प्रबंधन में सावधानी बरतें।
नीचे ऐसे उदाहरण दिए गए हैं जो यूनिट और यूनिट रहित मूल्यों के मिश्रण को संभालने का तरीका दिखाते हैं।
1$width: 100px;
2$ratio: 0.5;
3
4.box {
5 /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6 width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */- यूनिट्स के साथ और बिना यूनिट्स के मूल्यों को गुणा करना अपेक्षित रूप से काम करता है, लेकिन भाग देने पर परिणामी यूनिट (या उसकी अनुपस्थिति) के प्रति सतर्क रहें।
तुलना ऑपरेटर (==, !=, <, >, <=, >=)
SASS में तुलना ऑपरेटर होते हैं, जिन्हें कंडीशनल्स (@if) और मिक्सिन्स में ब्रांचिंग के लिए उपयोग किया जा सकता है। रंगों और सूचियों जैसे जटिल टाइप्स की तुलना उनके अपने नियमों का पालन करती है। ध्यान दें कि रंग की तुलना रंग स्थान (color space) पर निर्भर करती है।
नीचे एक उदाहरण है जो दो संख्याओं की तुलना करता है और स्टाइल को विभाजित करता है।
1$breakpoint: 768px;
2
3.container {
4 @if $breakpoint >= 768px {
5 max-width: 1200px;
6 } @else {
7 max-width: 100%;
8 }
9}- तुलना ऑपरेटरों को प्रतिक्रियाशील और कंडीशनल स्टाइल नियमों के लिए
@ifके साथ मिलाया जा सकता है।
तार्किक संचालन (and, or, not)
SASS and, or, और not का समर्थन करता है। and/or का उपयोग करके कई शर्तों को जोड़ें। कोष्ठकों का उपयोग करके प्रायरिटी और मूल्यांकन क्रम स्पष्ट किया जा सकता है।
नीचे तार्किक ऑपरेटरों का उपयोग करके जटिल शर्तों को संभालने का एक उदाहरण है।
1$mobile: false;
2$logged-in: true;
3
4.notice {
5 @if $logged-in and not $mobile {
6 display: block;
7 } @else {
8 display: none;
9 }
10}andऔरorकी प्रायरिटी कोष्ठकों से स्पष्ट की जा सकती है। जटिल शर्तों के लिए, कोष्ठकों का उपयोग पठनीयता और सुरक्षा बनाए रखने में मदद करता है।
स्ट्रिंग संचालन — संयोग और इंटरपोलेशन
SASS में, स्ट्रिंग का संयोग + या #{} इंटरपोलेशन का उपयोग करके किया जा सकता है। + ऑपरेटर का परिणाम इस बात पर निर्भर करता है कि बाईं स्ट्रिंग कोटेड है या अनकोटेड, इसलिए पूर्वानुमेय #{} इंटरपोलेशन का उपयोग करना अधिक सुरक्षित है।
नीचे संयोग और इंटरपोलेशन के उदाहरण दिए गए हैं।
1@use "sass:string";
2
3$base: "icon-";
4$variant: string.unquote("arrow");
5
6.icon {
7 /* Concatenation using + (old style) */
8 &--old { content: $base + $variant; } // -> icon-arrow
9
10 /* Interpolation is more reliable */
11 &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16 from { transform: translateX(0); }
17 to { transform: translateX(100%); }
18}- इंटरपोलेशन
#{}का उपयोग करना कोट्स और अनचाहा व्हाइटस्पेस जुड़ने की समस्याओं से बचाता है।
रंग गणना (अप्रचलित)
अतीत में, SASS 'रंग गणित' का समर्थन करता था, जिससे आप रंगों में संख्या जोड़ या घटा सकते थे। हालांकि, अब रंग गणित अमान्य है और आपको रंगों को संशोधित करने के लिए sass:color मॉड्यूल की फ़ंक्शन्स का उपयोग करना चाहिए।
नीचे उदाहरण दिए गए हैं जो दिखाते हैं कि सीधे रंग गणना अप्रचलित है और सुझाए गए विकल्प क्या हैं।
1/* Deprecated (old code example – no longer works or recommended) */
2/* background: $base-color + 10; */
3
4@use "sass:color";
5
6$base: #336699;
7
8.bg {
9 /* For example, to increase lightness, use color.scale() or color.adjust() */
10 /* Safe manipulation based on color space */
11 background: color.scale($base, $lightness: 20%);
12 /* Or make it lighter by mixing white */
13 background: color.mix(white, $base, 20%);
14}- यदि आप रंगों में बदलाव करना चाहते हैं, तो
sass:colorमॉड्यूल की फ़ंक्शन्स का उपयोग करें।
कोष्ठक और ऑपरेटर की प्राथमिकता
संचालन में मूल्यांकन के क्रम को नियंत्रित करने के लिए कोष्ठकों का उपयोग करें। कोष्ठकों के अंदर के संचालन हमेशा बाहर की तुलना में पहले मूल्यांकित होते हैं। जटिल समीकरणों में पठनीयता बनाए रखने के लिए कोष्ठकों का उपयोग करें।
नीचे कोष्ठकों से मूल्यांकन क्रम स्पष्ट करने के उदाहरण दिए गए हैं।
1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3; // 7 (multiplication first)- गणित की तरह, प्राथमिकता के नियम लागू होते हैं, इसलिए सुनिश्चित करें कि गणनाएँ इच्छित क्रम में हों इसके लिए कोष्ठकों का उपयोग करें।
सारांश
SASS में ऑपरेटरों का उपयोग करते समय, कोड को भविष्य की अनुकूलता और पठनीयता को ध्यान में रखकर लिखना महत्वपूर्ण है। जटिल समीकरणों में, कोष्ठकों का उपयोग करके गणना क्रम स्पष्ट करें और कोड की पठनीयता को प्राथमिकता दें।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।