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

نشرت: 2022-02-16

عند كتابة كود CSS لموقعك ، يمكنك الاستفادة من خصائص CSS المخصصة (المتغيرات) لتسريع عملية التطوير. يمكنك استخدام المتغيرات لتحديد الخصائص (الحجم واللون) ، والتي يمكن بعد ذلك تطبيقها على عدة عناصر.

بهذه الطريقة ، من الممكن أن يكون لديك المزيد من التحكم في الكود والتصميم. يؤدي تغيير قيمة متغير في مكان واحد إلى تجاوز قيمة تلك الخاصية في كل مكان يتم استدعاؤها.

سيشرح هذا المنشور كيفية استخدام متغيرات CSS وبعض التطبيقات العملية.

لنبدأ!

إعلان متغير

يمكن أن يكون للمتغيرات نطاق عالمي أو محلي. لتحديد متغير بشكل عام ، يمكنك استخدام: محدد الجذر.

 :root { --base-font-size: 1.1rem; }
فتح في المنبثقة
 :root { --base-font-size: 1.1rem; }

محدد الجذر: يطابق جذر المستند ، أي <html> في حالتنا الخاصة.

للإعلان عن خاصية مخصصة لـ CSS (متغير) ، عليك أن تبدأ بشرطتين (-). المتغيرات حساسة لحالة الأحرف ، على سبيل المثال:

--base-font-size و --Base-Font-Size هما متغيرين مختلفين.

لتعريف متغير محليًا ، يمكنك استخدام محدد العنصر الذي تريد استخدام المتغير فيه.

 #first-container { --background: #ccc; }
فتح في المنبثقة
 #first-container { --background: #ccc; }

بمجرد تحديد المتغير ، من الضروري استدعائه.

وظيفة var ()

تُستخدم الوظيفة var () لإدراج قيمة متغير CSS المحدد. تستبدل الدالة نفسها بقيمة المتغير. دعنا نلقي نظرة على مثال:

كود HTML

  • انسخ والصق هذا الرمز في محرر التعليمات البرمجية الخاص بك.
  • احفظ الملف كملف index.html .
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
فتح في المنبثقة
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

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

كود CSS

  • قم بإنشاء ملف يسمى style.css (في نفس دليل index.html ).
  • الصق الكود أدناه واحفظ الملف.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
فتح في المنبثقة
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

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

هناك بعض الأشياء التي يجب ملاحظتها هنا:

  1. يعد إنشاء لوحة الألوان عملية مباشرة.
  2. من الممكن استخدام متغير داخل تعريف متغير آخر ، مثل اللون في تعريف متغيرات الحدود.
  3. المتغيرات موروثة ، تؤثر خاصية اللون لعنصر .container- * على توابعه المباشرين. في هذه الحالة ، العنصر <p>.

لتجاوز متغير ، فإنك تعلنه داخل حاويته ، مما يجعله أكثر تحديدًا.

  • قم بتحرير كود CSS:
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
فتح في المنبثقة
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

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

المتغيرات والاستعلامات الإعلامية

يمكن أيضًا توريث المتغيرات وتجاوزها في استعلامات وسائط CSS.

  • أضف هذا الرمز إلى المتغيرات:
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
فتح في المنبثقة
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

لقد حددنا عرضًا أساسيًا لعنصر الغلاف. يمكننا الآن تطبيق هذه المتغيرات على خاصية العرض .wrapper.

  • أضف هذا الرمز إلى نهاية ملف CSS:
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
فتح في المنبثقة
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

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

لتحديد استعلام وسائط للأجهزة التي يقل عرضها عن 1100 بكسل ، نكتب استعلام الوسائط التالي.

  • قم بتحرير كود CSS:
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
فتح في المنبثقة
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

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

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

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

ملخص

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

آمل أن تكون قد أحببت هذا البرنامج التعليمي. شكرا للقراءة!