كيفية استخدام المتغيرات في CSS وتبسيط التصميم الخاص بك

تستخدم معظم مواقع الويب CSS لصقل مظهرها وتصميم مكونات صفحات الويب المختلفة. CSS ، أو Cascading Style Sheet ، ليست لغة برمجة من الناحية الفنية. ومع ذلك ، يمكن استخدام CSS مع لغات البرمجة مثل JavaScript لإنشاء صفحات ويب سريعة الاستجابة وتفاعلية.

إذا كنت قد استخدمت لغات برمجة ، مثل JavaScript ، فأنت تعلم أنه يمكنك تعريف متغير وتعيين قيمة له وإعادة استخدامه في أجزاء مختلفة من التعليمات البرمجية الخاصة بك. الخبر السار هو أنه يمكنك تطبيق نفس المفهوم في CSS.

ستحدد هذه المقالة متغيرات CSS ، وتصف فوائدها ، وتوضح لك كيفية الإعلان عن متغير واستخدامه في CSS.

ما هي المتغيرات في CSS؟

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

لماذا نستخدم متغيرات CSS؟ هذه بعض الأسباب.

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

كيفية تعريف المتغيرات في CSS

نظرًا لأنك تعرف ما هي المتغيرات في CSS ولماذا يجب عليك استخدامها ، يمكننا المضي قدمًا وتوضيح كيفية الإعلان عنها.

للإعلان عن متغير CSS ، ابدأ باسم العنصر ، ثم اكتب شرطتين (-) ، الاسم والقيمة المطلوبين. الصيغة الأساسية هي ؛

element {

--variable-name: value;

}

على سبيل المثال ، إذا كنت تريد تطبيق المساحة المتروكة في المستند بأكمله ، فيمكنك إعلانه على أنه ؛

body { 

--padding: 1rem;

}

نطاق المتغيرات في CSS

يمكن تحديد نطاق متغيرات CSS محليًا (يمكن الوصول إليها داخل عنصر معين) أو عالميًا (يمكن الوصول إليها في ورقة الأنماط بأكملها).

المتغيرات المحلية

يتم إضافة المتغيرات المحلية إلى محددات محددة. على سبيل المثال ، يمكنك إضافتها إلى زر. هذا مثال؛

.button {

    --button-bg-color: #33ff4e;

  }

متغير لون الخلفية متاح في محدد الزر وأطفاله.

المتغيرات العالمية

بمجرد الإعلان ، يمكنك استخدام المتغيرات العامة مع أي عنصر في التعليمات البرمجية الخاصة بك. نستخدم فئة الجذر الزائفة للإعلان عن المتغيرات العالمية. هذه هي الطريقة التي نعلن بها.

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

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

كيفية استخدام المتغيرات في CSS

سننشئ مشروعًا لأغراض العرض ونضيف ملفات index.html و styles.css.

في ملف index.html ، يمكن أن يكون لدينا div بسيط بعنوانين (h1 و h2) وفقرة (p).

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

في ملف style.css ، يمكننا الحصول على ما يلي ؛

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

عندما يتم عرض صفحة الويب ، سيكون لدينا ما يلي ؛

من الكود أعلاه ، أعلنا عن المتغيرات العالمية في: root element. يجب أن نستخدم الكلمة الأساسية var لاستخدام المتغير العام في أي عنصر من عناصرنا. على سبيل المثال ، لتطبيق لون الخلفية الذي أعلناه كمتغير عالمي ، نقدم كودنا على النحو التالي ؛

لون الخلفية: var (- اللون الأساسي) ؛

تحقق من جميع العناصر الأخرى ، وستلاحظ اتجاهًا في كيفية تطبيق var.

استخدم متغيرات CSS مع JavaScript

سنستخدم المتغيرات المحلية والعالمية لتوضيح كيفية استخدام متغيرات CSS مع JavaScript.

يمكننا إضافة عنصر تنبيه إلى الكود الموجود لدينا ؛

انقر فوق لي!

سيكون مستندنا index.html الجديد على النحو التالي ؛

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

يمكننا تصميم المتغير الخاص بنا. أضف التعليمات البرمجية التالية إلى كود CSS الحالي الخاص بك ؛

.alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

لقد قمنا بما يلي ؛

• تحديد متغير محلي داخل عنصر التنبيه ؛

–bg- اللون: أحمر

• استخدام الكلمة الأساسية var للوصول إلى هذا المتغير المحلي ؛

لون الخلفية: var (–bg-color) ؛

• استخدمنا المتغير العام الذي أعلناه سابقًا على أنه وزن الخط ؛

وزن الخط: var (–font-weight) ؛

أضف كود JavaScript

يمكننا أن نجعل عنصر التنبيه الخاص بنا مستجيبًا ؛ عند النقر فوقه ، تظهر لك نافذة منبثقة في متصفحك تقول ؛ “لقد استخدمنا CSS Variables مع JavaScript !!!!”.

يمكننا إضافة كود JavaScript مباشرة إلى كود HTML من خلال إرفاقه باستخدام علامات