الدرس 2 من 8

المتغيّرات المخصّصة

هدف الدرس

قيمة واحدة في مكان واحد

01

الشرح

المتغيّر المخصّص خاصية تبدأ بشرطتين وتُقرأ بـ var():

:root { --brand: #1d4ed8 } ثم color: var(--brand).

وما يميّزها عن متغيّرات Sass أنها حيّة في المتصفح وتتوارث: تعيد تعريفها على أي عنصر فيتغيّر كل ما تحته. هذا ما يجعل الوضع الداكن قاعدتين لا ملفًّا ثانيًا.

02

المطلوب

عرّف --brand على :root، واستعمله في .btn، ثم أعد تعريفه داخل .alt ليخرج الزرّ الثاني بلون آخر بلا أي قاعدة لون جديدة.

معايير التصحيح

4 معايير
  1. المتغيّر --brand معرَّف
  2. الزرّ يأخذ خلفيته من var()
  3. .alt يعيد تعريف المتغيّر
  4. الزرّان يخرجان بلونين مختلفين
index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل» ليبدأ الفحص.

4 معايير في بطاقة «المطلوب».