सीएसएस फ़ंक्शन की मदद से, स्टाइल के दोहराव को कम करना

बड़ी स्टाइलशीट को मैनेज करने से, अक्सर लॉजिक दोहराए जाते हैं. खास तौर पर, ग्रेडिएंट या रिस्पॉन्सिव लेआउट पैटर्न जैसे डिज़ाइन सिस्टम टोकन के साथ काम करते समय ऐसा होता है.

सीएसएस @function ऐट-रूल की मदद से, इस लॉजिक को फिर से इस्तेमाल किए जा सकने वाले, पैरामीटर वाले फ़ंक्शन में शामिल किया जा सकता है. इससे आपकी सीएसएस को मैनेज करना आसान हो जाता है, वह एक जैसी बनी रहती है, और DRY (Don't Repeat Yourself) बनी रहती है.

@function सिंटैक्स

कस्टम फ़ंक्शन को @function नियम का इस्तेमाल करके तय किया जाता है. इसके बाद, डैश वाला नाम और पैरामीटर की सूची होती है. यह फ़ंक्शन, result प्रॉपर्टी का इस्तेमाल करके वैल्यू दिखाता है.

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

खास कॉन्सेप्ट

• पैरामीटर: डबल डैश (--) से शुरू होने चाहिए.
• डिफ़ॉल्ट: कोलन (:) का इस्तेमाल करके, डिफ़ॉल्ट वैल्यू दी जा सकती हैं.
• नतीजा: result प्रॉपर्टी से यह तय होता है कि फ़ंक्शन कौनसी वैल्यू दिखाएगा. फ़ंक्शन बॉडी में आखिरी बार घोषित किया गया result ही मान्य होता है.
• स्कोपिंग: फ़ंक्शन के अंदर तय किए गए पैरामीटर और वैरिएबल, स्थानीय तौर पर स्कोप किए जाते हैं.
• टाइप: पैरामीटर और रिटर्न वैल्यू को ब्रैकेट नोटेशन (जैसे, <color>) के साथ सीएसएस टाइप से मैच करने की ज़रूरत पड़ सकती है. साथ ही, type फ़ंक्शन (जैसे, type(<number> | <percentage>)) के साथ कई टाइप की अनुमति दी जा सकती है.

प्रैक्टिकल उदाहरण

1. डिज़ाइन सिस्टम टोकन (ग्रेडिएंट)

ग्रेडिएंट लॉजिक को एनकैप्सुलेट करके, अपने ऐप्लिकेशन में एक जैसे कलर ग्रेडिएंट इस्तेमाल करें. --angle एक डिफ़ॉल्ट वैल्यू उपलब्ध कराता है, ताकि एक जैसी वैल्यू दी जा सके. हालांकि, इस वैल्यू को बदला जा सकता है.

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

2. शर्त के हिसाब से लेआउट का लॉजिक

@media या अन्य क्वेरी का इस्तेमाल सीधे किसी फ़ंक्शन में किया जा सकता है, ताकि एनवायरमेंट के आधार पर अलग-अलग वैल्यू दिखाई जा सकें. किसी फ़ंक्शन में कंडिशनल लॉजिक का इस्तेमाल करते समय, ध्यान रखें कि @function, result की पहली वैल्यू पर "वापस" नहीं जाता. इसके बजाय, यह सीएसएस कैस्केड का पालन करता है और स्क्रीन के साइज़, कंटेनर के साइज़ या अन्य क्वेरी के आधार पर मैच होने वाली आखिरी वैल्यू पर जाता है.

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

सबसे सही तरीके

• डैश वाले नामों का इस्तेमाल करें: अपने फ़ंक्शन के नामों और पैरामीटर के आगे हमेशा -- लगाएं.
• डिफ़ॉल्ट वैल्यू दें: सही डिफ़ॉल्ट वैल्यू देकर, अपने फ़ंक्शन को ज़्यादा बेहतर बनाएं.
• इसे आसान रखें: ऐसे लॉजिक के लिए फ़ंक्शन का इस्तेमाल करें जो असल में बार-बार इस्तेमाल होता है या जटिल है. प्रॉपर्टी-वैल्यू के आसान पेयर को ज़्यादा जटिल न बनाएं.
• टाइप का इस्तेमाल करें: पक्का करें कि आपके पैरामीटर और रिटर्न वैल्यू, सही टाइप की हों.
• पहले से कंपाइल किए गए विकल्पों का इस्तेमाल करें: ऐसे फ़ंक्शन जो उपयोगकर्ता के इनपुट, मीडिया क्वेरी या क्लाइंट-साइड के अन्य वैरिएशन पर निर्भर नहीं करते उनके लिए, सीएसएस प्रीकंपाइलर का इस्तेमाल करें. इससे क्लाइंट को बेवजह काम नहीं करना पड़ेगा.

फ़ॉलबैक रणनीतियां

सीएसएस फ़ंक्शन के साथ काम न करने वाले ब्राउज़र में, सीएसएस फ़ंक्शन का इस्तेमाल करके सेट की गई वैल्यू अमान्य होंगी. अन्य ब्राउज़र के साथ काम करने के लिए, पहले प्रॉपर्टी के लिए फ़ॉलबैक वैल्यू दें. सीएसएस फ़ंक्शन की सुविधा वाले ब्राउज़र में, इसे बदल दिया जाएगा.

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

अगर आपको अन्य ब्राउज़र के साथ काम करते समय, स्टाइल के दोहराव को कम करना है, तो Sass जैसे फ़ंक्शन वाले सीएसएस प्रीकंपाइलर का इस्तेमाल करें.