CSS Variables
المتغيرات في لغة CSS
سوف تتعلم في هذا الدرس دالة var في لغة CSS ووظيفيتها وكيف يمكن عمل style ديناميكي واستخدامه عدة مرات.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
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
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
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
