متغيرات 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()
   • تمنح المتغير نوعًا، مما يجعله بالأخص قابلًا للاستكمال في الرسوم المتحركة
   • تجبر المتغير على الوراثة في المستند بأكمله