CSS वेरिएबल और calc/clamp फ़ंक्शन

कस्टम प्रॉपर्टीज़, कैस्केड के भीतर वे रनटाइम पर कैसे रिज़ॉल्व होती हैं, और द्रव इंटरफ़ेस के लिए calc() तथा clamp() फ़ंक्शन में महारत हासिल करें।

10 मिनट · 3 प्रश्न

कस्टम प्रॉपर्टीज़ प्रीप्रोसेसर वेरिएबल नहीं हैं। एक Sass वेरिएबल कंपाइल समय पर बदल दिया जाता है; एक --brand प्रॉपर्टी रनटाइम पर रिज़ॉल्व होती है, कैस्केड में भाग लेती है, किसी भी अन्य प्रॉपर्टी की तरह इनहेरिट होती है, और इसे मीडिया क्वेरी, क्लास, या JavaScript के ज़रिए setProperty() से बदला जा सकता है। यही वह चीज़ है जो डायनामिक थीमिंग, बिना रीकंपाइलेशन के डार्क मोड, और बिना री-रेंडर के CSS/JS संचार को संभव बनाती है।

:root {
  --brand: #6c5ce7;
  --spacing: 8px;
}

.card {
  color: var(--brand);
  padding: calc(var(--spacing) * 2);
  border-color: var(--accent, currentColor);
}

var() का दूसरा तर्क एक फ़ॉलबैक मान है, जिसका उपयोग केवल तभी होता है जब प्रॉपर्टी परिभाषित नहीं होती। एक क्लासिक फंदा: अगर --accent की वैल्यू 12px है और आप इसे color में डालते हैं, तो फ़ॉलबैक का उपयोग नहीं होता। घोषणा कंप्यूटेड-वैल्यू समय पर अमान्य हो जाती है: प्रॉपर्टी अपने इनहेरिटेड या इनिशियल मान पर लौट आती है, न कि पिछली घोषणा पर जैसा एक सामान्य सिंटैक्स त्रुटि में होता।

@property नियम दो बड़ी सीमाओं को ठीक करता है: यह वेरिएबल को एक टाइप (और इसलिए वैलिडेशन) देता है और इसे एनिमेटेबल बनाता है, क्योंकि अब इंजन जानता है कि वेरिएबल को एक अपारदर्शी स्ट्रिंग की तरह मानने के बजाय दो टाइप किए गए मानों के बीच कैसे इंटरपोलेट करना है।

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.gauge {
  background: conic-gradient(
    var(--brand) var(--progress),
    #e5e7eb 0
  );
  transition: --progress 0.4s ease-out;
}

.gauge.is-full {
  --progress: 100%;
}

गणित की ओर, calc() आपको इकाइयाँ मिलाने देता है (calc(100% - 2rem)), जो एक प्रीप्रोसेसर के साथ असंभव है क्योंकि रिज़ॉल्यूशन रेंडरिंग संदर्भ पर निर्भर करता है। clamp(min, ideal, max) max(min, min(ideal, max)) के लिए एक शॉर्टकट है और द्रव टाइपोग्राफ़ी के लिए ब्रेकपॉइंट्स के ढेर से बेहतर है: आदर्श मान, जिसे अक्सर vw या cqi में व्यक्त किया जाता है, दोनों सीमाओं के बीच स्वतंत्र रूप से सरकता है।

:root {
  --fluid-title: clamp(
    1.5rem,
    1rem + 2.5vw,
    3rem
  );
}

h1 {
  font-size: var(--fluid-title);
  max-width: clamp(20ch, 60%, 65ch);
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. अगर color: var(--gap) का मूल्यांकन तब होता है जब --gap की वैल्यू 12px हो, तो क्या होता है?
   • घोषणा को अनदेखा कर दिया जाता है और पिछला color नियम लागू होता है
   • घोषणा कंप्यूटेड-वैल्यू समय पर अमान्य हो जाती है और color unset के रूप में रिज़ॉल्व होता है
   • ब्राउज़र 12px को काले के करीब एक रंग में बदल देता है
   • कंसोल में एक त्रुटि फेंकी जाती है और स्टाइलशीट अस्वीकृत हो जाती है
2. clamp(1rem, 2.5vw, 2rem) किसके सख्ती से समतुल्य है?
   • max(1rem, min(2.5vw, 2rem))
   • min(1rem, max(2.5vw, 2rem))
   • calc(1rem + 2.5vw + 2rem)
3. एक सामान्य कस्टम प्रॉपर्टी की तुलना में @property का मुख्य लाभ क्या है?
   • यह वेरिएबल को JavaScript से सुलभ बनाता है
   • यह वेरिएबल को किसी calc() के भीतर उपयोग करने की अनुमति देता है
   • यह वेरिएबल को एक टाइप देता है, जो विशेष रूप से इसे एनिमेशन में इंटरपोलेट करने योग्य बनाता है
   • यह वेरिएबल को पूरे दस्तावेज़ में इनहेरिट करने के लिए बाध्य करता है