الفصل التاسع متغيرات CSS (CSS Variables)

Byahmed nabel كورس CSS

إليك كورس كامل عن متغيرات CSS (CSS Variables):

1. مقدمة عن متغيرات CSS

  • متغيرات CSS هي ميزة تم تقديمها في CSS3 لتمكين تخزين القيم (مثل الألوان أو الأحجام أو أي خصائص أخرى) في متغيرات يمكن إعادة استخدامها في أنحاء مختلفة من الشيفرة.
  • تساعد المتغيرات في تحسين القابلية للصيانة والمرونة، حيث يمكن تغيير قيمة المتغير في مكان واحد لتؤثر على جميع الأماكن التي يُستخدم فيها المتغير.

2. الهيكل الأساسي لمتغيرات CSS

  • يتم تعريف المتغيرات باستخدام -- في بداية الاسم، ثم يتم تعيين القيم لها باستخدام var() لاستخدام المتغير.

أ. تعريف المتغيرات

  • يمكن تعريف المتغيرات داخل selector، مثل :root (الذي يشير إلى جذر المستند أو المستند بأكمله).

التركيب الأساسي:

css
:root {
--primary-color: #3498db;
--font-size: 16px;
}
  • في هذا المثال:
    • يتم تعريف متغيرين:
      • --primary-color: لون أساسي (أزرق).
      • --font-size: حجم خط أساسي (16px).

3. استخدام المتغيرات

  • لاستخدام المتغيرات في خصائص CSS، يتم استخدام var() مع اسم المتغير داخل القيم.

مثال:

css
body {
font-size: var(--font-size);
color: var(--primary-color);
}
  • في هذا المثال، يتم تطبيق المتغيرات التي تم تعريفها على font-size و color.

4. المتغيرات المحلية والعالمية

  • المتغيرات العالمية: يتم تعريفها في :root بحيث يمكن الوصول إليها في أي مكان داخل مستند CSS.
  • المتغيرات المحلية: يمكن تعريفها داخل عناصر معينة، ويتم تطبيقها فقط ضمن نطاق هذا العنصر.

أ. المتغيرات العالمية:

css
:root {
--main-bg-color: #f4f4f4;
}

body {
background-color: var(--main-bg-color);
}

ب. المتغيرات المحلية:

css
.container {
--container-bg-color: lightblue;
background-color: var(--container-bg-color);
}

.other-container {
background-color: var(--container-bg-color); /* غير معترف بها هنا */
}

  • في المثال السابق، --container-bg-color سيتم تطبيقه فقط في .container ولن يكون صالحًا في .other-container.

5. إعادة استخدام المتغيرات في أماكن متعددة

  • بعد تعريف المتغيرات في :root، يمكن استخدامها في أي مكان داخل CSS.

مثال:

css
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}

header {
background-color: var(--primary-color);
}

footer {
background-color: var(--secondary-color);
}

  • في هذا المثال، تم استخدام المتغيرات في العناصر header و footer لتمثيل ألوان الخلفية بشكل مختلف.

6. المتغيرات مع القيم الافتراضية

  • في حال كان المتغير غير مُعرّف أو كانت قيمته فارغة، يمكن استخدام قيمة افتراضية باستخدام var(--variable, fallback-value).

مثال:

css
p {
color: var(--text-color, black); /* إذا لم يتم تعريف --text-color، سيكون اللون الأسود */
}
  • في هذا المثال، إذا لم يتم تعريف المتغير --text-color، فسيتم استخدام اللون الأسود كقيمة افتراضية.

7. التعامل مع المتغيرات في JavaScript

  • يمكن التفاعل مع متغيرات CSS باستخدام JavaScript لتعديل القيم ديناميكيًا.

مثال:

javascript
document.documentElement.style.setProperty('--primary-color', '#ff6347');
  • في هذا المثال، يتم تغيير قيمة المتغير --primary-color إلى اللون #ff6347 باستخدام JavaScript.

8. المتغيرات في الأنماط المدمجة (Scoped Styles)

  • يمكن استخدام المتغيرات داخل المكونات أو العناصر الخاصة لتحسين المرونة، حيث يمكن تعريف متغيرات مخصصة لكل مكون.

مثال:

html
<div class="card" style="--card-bg-color: lightyellow;">
<p>هذه بطاقة مخصصة.</p>
</div>
css
.card {
background-color: var(--card-bg-color, lightgray);
}
  • هنا، يتم تخصيص خلفية للعنصر .card باستخدام متغير محلي مع قيمة افتراضية إذا لم يتم تعريف المتغير.

9. الاستفادة من المتغيرات في تصميم المواقع المتجاوبة (Responsive Design)

  • يمكن استخدام المتغيرات في التصميم المتجاوب مع الميديا كويريز لتغيير القيم بناءً على عرض الجهاز.

مثال:

css
:root {
--font-size: 16px;
}

@media (max-width: 768px) {
:root {
--font-size: 14px;
}
}

body {
font-size: var(--font-size);
}

  • في هذا المثال، يتم تغيير font-size بناءً على عرض الشاشة باستخدام ميديا كويري.

10. مزايا استخدام متغيرات CSS

  • التكرار: يمكن تعريف قيمة واحدة واستخدامها في أماكن متعددة، مما يقلل من التكرار.
  • المرونة: يمكن تعديل المتغيرات بسهولة لتغيير الأنماط في الموقع بأكمله.
  • التوافق مع JavaScript: يمكن تعديل المتغيرات ديناميكيًا باستخدام JavaScript.
  • التحسينات المستقبلية: يمكن للمطورين استخدام المتغيرات لتحسين الصيانة في مشاريع CSS الكبيرة.
  • التصميم المتجاوب: المتغيرات تجعل التعديل على القيم أسهل عند استخدام ميديا كويريز.

11. أمثلة عملية على متغيرات CSS

أ. تطبيق ألوان ديناميكية باستخدام المتغيرات

HTML:

html
<div class="container">
<h1>مرحبا بك في موقعنا!</h1>
</div>

CSS:

css
:root {
--primary-bg-color: #3498db;
--primary-text-color: #ffffff;
}

.container {
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
padding: 20px;
}

  • في هذا المثال، تم استخدام المتغيرات لتعيين ألوان الخلفية والنص بشكل ديناميكي.

ب. متغيرات مخصصة في الميديا كويريز

CSS:

css
:root {
--font-size: 16px;
}

@media (max-width: 600px) {
:root {
--font-size: 14px;
}
}

body {
font-size: var(--font-size);
}

  • في هذا المثال، يتم تعديل font-size بناءً على عرض الشاشة باستخدام الميديا كويري.

12. ملخص الدرس

  • تعلمنا كيفية تعريف واستخدام المتغيرات في CSS باستخدام -- و var().
  • استكشفنا كيفية استخدام المتغيرات العالمية والمحلية وكيفية التفاعل معها في JavaScript.
  • قمنا باستخدام المتغيرات في التصميم المتجاوب و الميديا كويريز.
  • استفدنا من مزايا سهولة الصيانة و المرونة التي توفرها المتغيرات في CSS.

إذا كان لديك أي استفسار حول متغيرات CSS أو تريد أمثلة إضافية، لا تتردد في سؤالي!

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *