CSS

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

سوف تتعلم في هذا الدرس دالة var في لغة CSS ووظيفيتها وكيف يمكن عمل style ديناميكي واستخدامه عدة مرات.

التاريخ

31 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1933

المواضيع

24
الشروحات chevron_left CSS Variables chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> CSS Variables
المتغيرات في لغة CSS

  • في لغة 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;
}
مصطلحات الدرس
Variables
Variables

متغيرات

Advantages
Advantages

مزايا

Overriding
Overriding

زائد / تجاوز

Using
Using

بإستخدام

Media
Media

وسائط

Class
Class

فئة

Container
Container

حاوية المحتوي

Font-Size
Font-Size

حجم الخط

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
Var
Var

Varibles

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