SASS फ़ंक्शंस
यह लेख SASS फ़ंक्शंस को समझाता है।
हम SASS फ़ंक्शंस को मूल से लेकर उन्नत विषयों तक, व्यावहारिक नमूनों सहित, जो वास्तविक कार्य में उपयोगी हैं, पूरी तरह से समझाएंगे।
YouTube Video
SASS फ़ंक्शंस
SASS फ़ंक्शंस शक्तिशाली टूल हैं जो स्टाइलशीट्स में दोबारा प्रयोज्य लॉजिक को समाहित करते हैं, जिससे कैलकुलेशन, फॉर्मेटिंग और कंडीशनल ब्रांचिंग संभव होती है।
फ़ंक्शंस की मूल संरचना और उपयोग
SASS फ़ंक्शंस को @function से डिफाइन किया जाता है और @return का उपयोग करके कोई मान लौटाते हैं। फ़ंक्शंस को बिल्ट-इन फ़ंक्शंस की तरह ही कॉल किया जाता है।
1// Example: Define a simple function that doubles a value
2@function double($n) {
3 @return $n * 2;
4}
5
6// Use the function
7.example {
8 width: double(10px); // -> 20px
9}- यह कोड एक फ़ंक्शन को परिभाषित करता है जो किसी संख्या को दोगुना करता है और उसे चौड़ाई पर लागू करता है। परिणामस्वरूप,
.example { width: 20px; }जेनरेट होगा।
आर्ग्युमेंट्स, डिफ़ॉल्ट मान, और प्रकार प्रबंधन
फ़ंक्शंस कई आर्ग्युमेंट्स ले सकते हैं और डिफ़ॉल्ट मान सेट कर सकते हैं। SASS में स्थिर टाइपिंग लागू नहीं होती, लेकिन आर्ग्युमेंट्स के स्वरूप पर ध्यान देना आपके फ़ंक्शंस को अधिक मजबूत बनाता है।
1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3 @return $base-size * $scale + $unit;
4}
5
6.title {
7 font-size: responsive-font(16, 1.25); // -> 20px
8}responsive-fontमेंscaleऔरunitके लिए डिफ़ॉल्ट मान हैं, और इसे कॉल करते समय कुछ आर्ग्युमेंट्स छोड़े जा सकते हैं। इस उदाहरण में,font-size: 20px;जैसा एक मान आउटपुट होगा।
वैरिएडिक आर्ग्युमेंट्स (...) का उपयोग
यदि आप कई मान पास करना चाहते हैं, तो वैरिएडिक आर्ग्युमेंट्स का उपयोग करें। यह लिस्ट या कई रंगों को संभालने के लिए उपयोगी है।
1// Example: Sum any number of numbers passed in
2@function sum-all($numbers...) {
3 $total: 0;
4 @each $n in $numbers {
5 $total: $total + $n;
6 }
7 @return $total;
8}
9
10.box {
11 padding: sum-all(4px, 6px, 10px); // -> 20px
12}$numbers...जैसे वैरिएडिक आर्ग्युमेंट को एक लिस्ट के रूप में माना जाता है और@eachका उपयोग कर प्रोसेस किया जा सकता है। इस उदाहरण में,padding: 20px;आउटपुट होगा।
लिस्ट या मैप लौटाना और उनमें बदलाव करना
फ़ंक्शंस लिस्ट (स्पेस या कॉमा से विभाजित) और मैप भी लौटा सकते हैं। यह जटिल मान लौटाने के लिए उपयोगी है।
1@use "sass:map";
2
3// Example: Return a map of spacing scale
4@function spacing-scale($base) {
5 @return (
6 'small': $base * 0.5,
7 'medium': $base,
8 'large': $base * 2
9 );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15 margin-bottom: map.get($scale, 'medium');
16}- फ़ंक्शन द्वारा एक मैप लौटाया जाता है, और फिर मानों को
map.getके साथ प्राप्त किया जाता है। यह आपको एक समान स्पेसिंग सिस्टम बनाए रखने की अनुमति देता है।
शर्तों और लूप्स वाले फ़ंक्शंस
@if, @else if, @else, @for, @each, और @while सभी को फ़ंक्शन के अंदर उपयोग किया जा सकता है। आप शर्तों और लूप्स के साथ कैलकुलेशन लॉजिक बना सकते हैं।
1// Example: Generate modular scale value using loop
2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
3 $result: $base;
4 @if $step == 0 {
5 @return $result;
6 }
7 @if $step > 0 {
8 @for $i from 1 through $step {
9 $result: $result * $ratio;
10 }
11 } @else {
12 @for $i from 1 through abs($step) {
13 $result: $result / $ratio;
14 }
15 }
16 @return $result;
17}
18
19.h1 {
20 font-size: modular-scale(3, 1rem, 1.333);
21}- यह फ़ंक्शन एक मॉड्यूलर स्केल कैलकुलेट करता है और पॉजिटिव या नेगेटिव स्टेप्स के अनुसार गुणा या भाग करता है।
modular-scale(3, 1rem, 1.333)बेस से तीन स्टेप ऊपर का फॉन्ट साइज़ लौटाता है।
त्रुटि प्रबंधन और चेतावनियाँ (@error, @warn)
आप अमान्य आर्ग्युमेंट्स या अकल्पित ऑपरेशन पर @error द्वारा प्रोसेस रोक सकते हैं, और @warn के जरिए चेतावनी जारी कर सकते हैं। इसका उद्देश्य उपयोगकर्ताओं को समस्या के बारे में जल्दी सतर्क करना है।
1@use "sass:math";
2@use "sass:meta";
3
4// Example: Validate input and throw an error for invalid units
5@function ensure-length($value) {
6 @if meta.type-of($value) != 'number' or math.is-unitless($value) {
7 @error "Expected a length with units, got #{$value}.";
8 }
9 @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14 width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21// // expect error: "Expected a length with units, got 10."
22// width: ensure-length(10);
23// }- यदि आप अमान्य मान पास करते हैं, तो बिल्ड के समय एक त्रुटि आउटपुट होगी, जिससे कारण पता करना आसान हो जाएगा। फ़ंक्शंस के भीतर जांच जल्दी बग डिटेक्शन के लिए उपयोगी होती है।
रंग-विशिष्ट फ़ंक्शंस बनाना
SASS में, आप विभिन्न फ़ंक्शनों को जोड़कर जो रंगों में बदलाव करते हैं, अपनी खुद की रंग पैलेट बना सकते हैं। यह आपके प्रोजेक्ट में एक समान रंग योजना बनाए रखने के लिए उपयोगी है।
1@use "sass:color";
2@use "sass:list";
3
4// Example: Generate a color palette (tints and shades) from a base color
5@function palette($color, $steps: 5, $strength: 10%) {
6 $colors: ();
7 @for $i from 0 through $steps {
8 $amount: $i * $strength;
9 $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10 $tint: color.mix(white, $color, $amount);
11 $colors: list.append($colors, $shade);
12 $colors: list.append($colors, $tint);
13 }
14 @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20 background-color: list.nth($palette, 1);
21}- इस उदाहरण में, शेड्स बनाने के लिए काले रंग के साथ और टिंट्स बनाने के लिए सफेद रंग के साथ मिलाने के लिए
color.mixका उपयोग किया गया है। मानों को एक सूची में लौटाया जाता है, और इन्हेंlist.nthका उपयोग करके एक्सेस किया जा सकता है।
प्रदर्शन और संकलन समय पर ध्यान दें
SASS फ़ंक्शंस को कंपाइल टाइम पर मूल्यांकित किया जाता है। भारी लूप, गहरा पुनरावृत्ति, या बड़े पैमाने पर मैप ऑपरेशन संकलन समय बढ़ा देंगे। फ़ंक्शंस को छोटा और सरल रखें; यदि आवश्यक हो तो जटिल प्रोसेसिंग को SASS के बाहर, बिल्ड टूल्स या प्रीप्रोसेसर में संभालने पर विचार करें।
व्यावहारिक यूटिलिटी फ़ंक्शन संग्रह
यहाँ कुछ सामान्य रूप से उपयोग किए जाने वाले यूटिलिटी फ़ंक्शंस दिए गए हैं। यह कोड असली परियोजनाओं में तुरंत उपयोग करने योग्य बनाने के लिए डिज़ाइन किया गया है।
1@use "sass:math";
2
3// Example: Clamp a value between min and max
4@function clamp-value($value, $min, $max) {
5 @if $value < $min {
6 @return $min;
7 } @else if $value > $max {
8 @return $max;
9 }
10 @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15 @if math.unit($px) != "px" {
16 @error "px-to-rem requires a px value.";
17 }
18 @return ($px / $root) * 1rem;
19}clamp-valueकिसी मान पर उच्च और निम्न सीमा लागू करता है, औरpx-to-remपिक्सेल मानों को रेम में परिवर्तित करता है। इन दोनों से वे प्रक्रियाएँ सरल होती हैं जो रिस्पॉन्सिव डिज़ाइन में अक्सर आती हैं।
@function और मिक्सिन्स (@mixin) के बीच चयन
फ़ंक्शंस मान लौटाने में विशेषज्ञ हैं, जबकि मिक्सिन्स CSS ब्लॉक्स आउटपुट करते हैं। यदि लॉजिक का परिणाम एकल प्रॉपर्टी वैल्यू है तो फ़ंक्शन का उपयोग करें; यदि यह पूरा स्टाइल ब्लॉक है तो मिक्सिन का उपयोग करें।
1// Example: Function returns a value
2@function border-radius-value($size) {
3 @return $size * 1px;
4}
5
6// Example: Mixin outputs properties
7@mixin rounded($size) {
8 border-radius: border-radius-value($size);
9 -webkit-border-radius: border-radius-value($size);
10}
11.card {
12 @include rounded(8);
13}- फ़ंक्शंस अंक या रंग जैसी वैल्यूज लौटाते हैं जिन्हें अन्य गुणों में उपयोग किया जा सकता है, जबकि मिक्सिन्स सीधे प्रॉपर्टी ग्रुप्स जोड़ते हैं। डिज़ाइन में स्पष्ट विभाजन रखकर अनुरक्षण क्षमता बढ़ती है।
स्ट्रिंग में बदलाव और आउटपुट फॉर्मेट पर विचार
SASS में यूनिट वाले नंबर और स्ट्रिंग्स संभालते समय सतर्क रहें। यूनिट के साथ नंबर में स्ट्रिंग जोड़ने से अनपेक्षित आउटपुट आ सकता है। आवश्यकतानुसार unquote() या स्ट्रिंग इंटरपोलेशन (#{}) का उपयोग करें।
1@use "sass:math";
2
3// Example: Safely create a CSS value string
4@function px-percentage($px, $total) {
5 $percent: math.div($px, $total) * 100;
6 @return "#{$percent}%";
7}
8
9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11 $percent: math.div($px, $total) * 100;
12 // Round to 2 decimal places safely
13 $rounded: math.div(math.round($percent * 100), 100);
14 @return "#{$rounded}%";
15}- प्रतिशतों को स्ट्रिंग के रूप में लौटाते समय, बेहतर स्पष्टता के लिए इंटरपोलेशन या
roundका उपयोग करके प्रिसीजन मैनेज करें। बग्स से बचने के लिए, कैलकुलेशन परिणामों को स्ट्रिंग्स में जोड़ते समय डाटा टाइप्स को स्पष्ट रूप से प्रबंधित करें।
परीक्षण और दस्तावेजीकरण के लिए सर्वोत्तम अभ्यास
एक फ़ंक्शन लिखने के बाद, उपयोग के उदाहरणों के साथ छोटे SCSS फाइलें टेस्ट के रूप में बनाएं, जिससे अनुरक्षण आसान हो जाता है। आप प्रत्येक फ़ंक्शन के लिए इनपुट प्रकार/यूनिट, रिटर्न प्रकार, असफलता व्यवहार और उपयोग के उदाहरण दस्तावेज कर सकते हैं।
1@use "sass:math";
2
3// Example: Inline "tests" (partial usage examples)
4// These can be compiled separately during development
5
6@function double($n) {
7 @return $n * 2;
8}
9
10@function px-to-rem($px, $root: 16px) {
11 @if math.unit($px) != "px" {
12 @error "px-to-rem requires a px value.";
13 }
14 @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19 width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24 font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";- 'अपेक्षित आउटपुट' के छोटे उदाहरणों के साथ टिप्पणी छोड़ने से भविष्य के रीफैक्टरिंग के दौरान रिग्रेशन को पहचानना आसान हो जाता है। CI वातावरण में स्वचालित रूप से संकलन करना और आउटपुट को वास्तविक रूप से जांचना प्रभावी है।
सारांश
SASS फ़ंक्शंस, शैलियों में पुन: उपयोगिता और अनुरूपता बढ़ाने का एक शक्तिशाली तरीका हैं। इनको छोटा और साधारण बनाएं, और @error व @warn का उपयोग कर सुरक्षा सुनिश्चित करें। रंग, अंतराल और यूनिट परिवर्तन के लिए यूटिलिटी फ़ंक्शंस को साझा लाइब्रेरी में एकत्र करना सुविधाजनक है। कम्पाइल ओवरहेड से बचने के लिए, आवश्यकता पड़ने पर जटिल प्रोसेसिंग को अन्य बिल्ड चरणों में अलग करने पर विचार करें।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।