شرح الدالة var() في Css

دالة var() في CSS هي أداة قوية تسمح لك باستخدام المتغيرات (Custom Properties) التي تم تعريفها في CSS. هذه الدالة تُضيف مرونة كبيرة إلى التصميم، حيث يمكنك تعريف القيم مرة واحدة واستخدامها في عدة أماكن، مما يسهل عملية التعديل ويجعل الكود أكثر تنظيماً. في هذا المقال، سنستعرض كل ما تحتاج معرفته عن دالة var()، من أساسياتها إلى استخداماتها المتقدمة.

ما هي دالة var()؟

دالة var() تُستخدم لاسترداد قيمة متغير (Custom Property) تم تعريفه مسبقاً في CSS. المتغيرات في CSS تُعرف باستخدام الصيغة --variable-name، ويتم استرداد قيمتها باستخدام var(--variable-name).

صيغة الدالة:

property: var(--variable-name, fallback-value);

• --variable-name: اسم المتغير الذي تريد استخدامه.
• fallback-value (اختياري): قيمة بديلة يتم استخدامها إذا كان المتغير غير معرّف.

فوائد استخدام دالة var()

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

كيفية تعريف المتغيرات واستخدامها

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

يتم تعريف المتغيرات في CSS باستخدام الصيغة التالية:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

:root هو العنصر الأعلى في التسلسل الهرمي للعناصر، مما يجعل المتغيرات متاحة في جميع أنحاء المستند.

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

يمكنك استخدام المتغيرات باستخدام دالة var():

body {
  background-color: var(--primary-color);
  font-size: var(--font-size);
}

.button {
  background-color: var(--secondary-color);
  color: white;
}

استخدامات دالة var()

تطبيق الألوان

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

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

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

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

تطبيق أحجام الخطوط

يمكنك استخدام المتغيرات لتحديد أحجام الخطوط بشكل مركزي:

:root {
  --font-size-small: 14px;
  --font-size-medium: 16px;
  --font-size-large: 20px;
}

p {
  font-size: var(--font-size-medium);
}

h1 {
  font-size: var(--font-size-large);
}

تطبيق الهوامش والحشو

يمكنك استخدام المتغيرات لتحديد الهوامش والحشو بشكل مرن:

:root {
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-large: 30px;
}

.container {
  padding: var(--spacing-medium);
}

.item {
  margin: var(--spacing-small);
}

استخدام القيم البديلة (Fallback Values)

يمكنك تحديد قيمة بديلة في حالة عدم تعريف المتغير:

.element {
  background-color: var(--undefined-color, #ff4081); /* سيتم استخدام #ff4081 إذا كان المتغير غير معرّف */
}

أمثلة عملية متقدمة

إنشاء تخطيط مرن (Flexible Layout)

:root {
  --grid-gap: 20px;
  --column-width: calc((100% - var(--grid-gap) * 3) / 4);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, var(--column-width));
  gap: var(--grid-gap);
}

التطبيق: يُستخدم لإنشاء تخطيط شبكي مرن مع فجوات متساوية.

تطبيق أنماط متغيرة بناءً على حجم الشاشة

يمكنك تغيير قيم المتغيرات باستخدام استعلامات الوسائط (@media):

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

@media (max-width: 768px) {
  :root {
    --font-size: 14px; /* تغيير حجم الخط للشاشات الصغيرة */
  }
}

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

إنشاء أنماط ديناميكية باستخدام JavaScript

يمكنك تغيير قيم المتغيرات ديناميكياً باستخدام JavaScript:

document.documentElement.style.setProperty('--primary-color', '#e91e63');

التطبيق: يُستخدم لتغيير الأنماط بناءً على تفاعلات المستخدم.

نصائح لاستخدام دالة var()

• استخدم أسماء وصفيّة: اختر أسماء متغيرات توضح الغرض منها، مثل --primary-color أو --font-size-large.
• اختبر التوافق: تأكد من أن المتصفحات التي تستهدفها تدعم المتغيرات CSS.
• استخدم القيم البديلة: حدد قيماً بديلة لضمان عدم حدوث أخطاء في التصميم إذا كان المتغير غير معرّف.
• نظّم المتغيرات: قم بتعريف المتغيرات في مكان مركزي مثل :root لتسهيل إدارتها.

الخلاصـــة

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

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