CSS Tutorial

المتغيرات - variables

المفهوم:

تسمح لك متغيرات CSS بتخزين قيم قابلة لإعادة الاستخدام في متغيرات، مما يسهل تغيير سريع للتصميم دون الحاجة إلى تعديل كل مثيل للقيمة.

الخطوات العملية:

  • إعلان المتغير:

استخدم الجملة التالية لإعلان متغير:

--<اسم-المتغير>: <القيمة>;
  • استخدام المتغير:

استخدم المتغير في أي مكان في ورقة أنماط CSS باستخدام اسم المتغير مسبقًا بـ "()var":

<property>: var(--<اسم-المتغير>);

مثال CSS:

لتعيين لون الخط لجميع العناوين <h1> إلى اللون الأزرق، يمكنك استخدام المتغير التالي:

--لون-الخط: blue;

h1 {
  color: var(--لون-الخط);
}

تحسين إمكانية الوصول وسهولة الاستخدام:

  • استخدم أسماء متغيرات واضحة وموجزة.
  • تجنب استخدام المتغيرات المعقدة للغاية والتي يصعب تتبعها.
  • اختبر بصريًا التأثير الذي تحدثه المتغيرات على التصميم.