الدرس 2 من 8
المتغيّرات المخصّصة
- 13 دقيقة
- 4 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
قيمة واحدة في مكان واحد
01
الشرح
المتغيّر المخصّص خاصية تبدأ بشرطتين وتُقرأ بـ var():
:root { --brand: #1d4ed8 } ثم color: var(--brand).
وما يميّزها عن متغيّرات Sass أنها حيّة في المتصفح وتتوارث: تعيد تعريفها على أي عنصر فيتغيّر كل ما تحته. هذا ما يجعل الوضع الداكن قاعدتين لا ملفًّا ثانيًا.
02
المطلوب
عرّف --brand على :root، واستعمله في .btn، ثم أعد تعريفه داخل .alt ليخرج الزرّ الثاني بلون آخر بلا أي قاعدة لون جديدة.
معايير التصحيح
4 معايير- المتغيّر --brand معرَّف
- الزرّ يأخذ خلفيته من var()
- .alt يعيد تعريف المتغيّر
- الزرّان يخرجان بلونين مختلفين