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

كيف تعمل دالة var في لغة CSS:

يمكن أن تكون المتغيرات في لغة CSS من النوع local أو global.
المتغيرات من النوع global يمكن أن تستخدم في أي مكان في صفحة CSS.
المتغيرات من النوع local يمكن أن تستخدم فقط داخل نطاق declaration block الذي تم تعريف بداخله المتغير.
عندما يتم الإعلان عن متغير من النوع global يجب أن يكون بداخل root selector: وهو يعني يمكن اختياره داخل ملف CSS بالكامل.

CSS Variables Syntax

طريقة كتابة المتغيرات في لغة CSS.

var(--name, value)

</> Before CSS variables
قبل المتغيرات في لغة CSS

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

Before CSS variables

قبل المتغيرات في لغة CSS.

body
{
  background-color: #6c5ce7;
  color:#ffffff;
}

h1 
{
  border-bottom: 2px solid #6c5ce7;
}

.container {
  color: #6c5ce7;
  background-color: #ffffff;
  padding: 15px;
  margin-top:10px;
}
	
button {
  background-color: #6c5ce7;
  color: #ffffff;
  border: 1px solid var(--purple);
  padding: 5px;
}

جربها بنفسك

</> After CSS variables
بعد المتغيرات في لغة CSS

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

After CSS variables

بعد المتغيرات في لغة CSS.

:root {
  --base: #6c5ce7;
  --white: #ffffff;
}

جربها بنفسك

</> CSS overriding variables
تغير اللون مرة واحدة فقط مع المتغيرات في لغة CSS

يمكن تغيير لون template القالب بالكامل مرة واحده فقط بدلاً من تغيير الوان في جميع ملفات CSS ولجميع selectors وهذه تعد أفضل طريقة لاستخدام المتغيرات وهي تميز استخدامه في لغة CSS.

CSS overriding variables

تغير اللون مرة واحدة فقط مع المتغيرات في لغة CSS.

:root {
  --base: #e84393;
  --white: #ffffff;
}

جربها بنفسك

</> CSS local variable
المتغير من النوع local في لغة CSS

دالة ( ) var لها مميزات تساعدنا في كتابة اكواد css فهي تساعدنا في

تجعل الكود سهل الفهم والقراءة
تجعل تغيير الوان العناصر اسهل من ذي قبل

Can not access local in another declaration block

لا يمكن استخدام متغير داخل declaration block أخر لأنه متغير محلي في لغة CSS.

.container {
  --template: #0984e3;
  color: var(--template);
  background-color: var(--white);
  padding: 15px;
  margin-top:10px;
}

h1 
{
  color:var(--template);
}

CSS local variable

المتغير من النوع local في لغة CSS.

.container {
  --template: #0984e3;
  color: var(--template);
  background-color: var(--white);
  padding: 15px;
  margin-top:10px;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

CSS Variables
المتغيرات في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Variables CSS