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

فهم متغيرات CSS
يمكن تحديد القيم القابلة لإعادة الاستخدام لورقة الأنماط واستخدامها طوال الوقت باستخدام متغيرات CSS. يتم الإعلان عنها باستخدام البادئة — متبوعة باسم، عادة ضمن الفئة الزائفة :root للتوفر العالمي. يمكن استخدامها لتخزين قيم مثل الخطوط والألوان والعرض والارتفاع وما إلى ذلك. ويمكن أيضًا استخدام هذه المتغيرات عبر ملفات أخرى بمجرد تعريفها في كود CSS.(اقرأ المزيد)

هذه هي الطريقة التي يتم بها تعريف متغير CSS:

:root {
  --main-color: #3498db;
}

في هذا المثال، قمنا بتعريف متغير اسمه –main-color وقيمته هي #3498db. لقد أعلنا عنه ضمن الفئة الزائفة :root، مما يضمن إمكانية الوصول إلى المتغير في كل مكان في كود CSS.

كيفية استخدام متغيرات CSS
بمجرد تحديدها، يمكنك استخدام متغيرات CSS في أي مكان في كود CSS الخاص بك باستخدام الدالة var() للوصول إليها.

فار ():

يسمح لك متغير CSS var() بإدخال قيمة خاصية مخصصة لاستبدال جزء من قيمة خاصية أخرى..

بناء الجملة :

var(--custom-property);

مثال :

.element {
  color: var(--main-color);
}

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

1.إنشاء ألوان ديناميكية للموضوع
انتاج

فكر في الموقف الذي ترغب فيه في تصميم صفحة ويب حيث يتغير لون السمة ديناميكيًا. تريد أن تكون قادرًا على تزويد المستخدمين بخيار النقر فوق زر ثم رؤية تغيير نظام ألوان الصفحة بالكامل. دعونا نرى كيف يمكن لمتغيرات CSS أن تجعل هذا ممكنًا. (اقرأ المزيد حول متغير CSS)

لغة البرمجة:

  
Dynamic Theme - CSS Variables
  
Change Theme Color

  

CSS:

:root {
  --primary-color: #3498db;
}

.header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  text-align: center;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin: 20px;
  border-radius: 5px;
}

جافا سكريبت:

document.getElementById('changeColorBtn').addEventListener('click', function() {
  // Generate a random hex color
  var randomColor = '#'   Math.floor(Math.random()*16777215).toString(16);

  // Set the random color as the new primary color
  document.documentElement.style.setProperty('--primary-color', randomColor);
});

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

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