❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالمتغيرات

  • مفهوم المتغيرات
  • طريقة تعريف متغير عام
  • طريقة تعريف المتغير خاص
  • المتغيرات مع إستعلامات الوسائط

مفهوم المتغيرات

المتغيرات ( Variables ) في CSS هي طريقة لتعريف القيم بشكل يسهّل استعمالها و التعديل عليها لاحقاً.
غالباً ما يستعمل المصممين المتغيرات لتخزين درجات الألوان و أحجام الخطوط.

الهدف الأساس من تعريف المتغير أن يمثل قيمة ستستخدم بشكل متكرر.


فائدة المتغيرات

كمثال عملي، إذا كنت تريد إعطاء الأزرار المهمة في الصفحة درجة اللون #0275d8 و أنت تعلم تماماً أنك قد تضطر إلى تغيير ذلك لاحقاً مع التحديثات المستمرة لتصميم الموقع، يمكنك تخزين درجة اللون في متغير و جعل الأزرار المهمة تستخدم قيمة هذا المتغير لكي تحدد ألوانها. عندها متى ما أردت تغيير لون هذه الأزرار فإنك ببساطة تغيّرها مرة واحدة في المتغير الذي عرّفتها فيه و ستتحدث بشكل تلقائي عند جميع الأزرار التي تستخدمه.

باستخدام المتغيرات لن يكون هناك تكرار لا داعي له للقيم و لن يكون المصمم مضطر إلى حفظ القيم المعقدة كلما أراد استخدامها.

طريقة تعريف متغير عام

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

بالنسبة لأسماء المتغيرات فإنها يجب دائماً أن تبدأ برمزين -- و من ثم تضع أي إسم من اختيارك أنت.

في النهاية لاستخدام المتغيرات نقوم بتمريرها بداخل الدالة var() و التي بدورها تقوم باستبدال إسمها بقيمتها.

المتغيرات التي يتم تعريفها بشكل عام تسمى Global Variables.


في المثال التالي قمنا بتعريف متغيرات يمكن استخدامها في تحديد الألوان.

المثال الأول

:root {
--primary: #0275d8;
--secondary: #6c757d;
--danger: #dc3545;
--white: #FFF;
}
.send {
color: var(--white);
background-color: var(--primary);
}
.edit {
color: var(--white);
background-color: var(--secondary);
}
.delete {
color: var(--white);
background-color: var(--danger);
}
:root { --primary: #0275d8; --secondary: #6c757d; --danger: #dc3545; --white: #FFF; } .send { color: var(--white); background-color: var(--primary); } .edit { color: var(--white); background-color: var(--secondary); } .delete { color: var(--white); background-color: var(--danger); }
جرب الكود

في المثال التالي قمنا بتعريف متغيرات يمكن استخدامها في تحديد أنواع و أحجام الخطوط.

المثال الثاني

:root {
--main-font-size: 16px;
--main-font-family: Arial;
--page-title-font-size: 20px;
--code-font-family: Consolas, Courier New, monospace;
}
body {
font-family: var(--main-font-family);
font-size: var(--main-font-size);
}
h1 {
font-family: var(--page-title-font-size);
}
code {
font-family: var(--code-font-family);
}
:root { --main-font-size: 16px; --main-font-family: Arial; --page-title-font-size: 20px; --code-font-family: Consolas, Courier New, monospace; } body { font-family: var(--main-font-family); font-size: var(--main-font-size); } h1 { font-family: var(--page-title-font-size); } code { font-family: var(--code-font-family); }
جرب الكود

في المثال التالي قمنا بتعريف متغيرات يمكن استخدامها لتحديد المدة التي سيظهر خلالها التأثير.

المثال الثالث

:root {
--fast: 0.3s;
--slow: 1s;
}
input[name="search"] {
width: 100px;
transition: all ease-in-out var(--slow);
}
input[name="search"]:focus {
width: 100%;
}
:root { --fast: 0.3s; --slow: 1s; } input[name="search"] { width: 100px; transition: all ease-in-out var(--slow); } input[name="search"]:focus { width: 100%; }
جرب الكود

طريقة تعريف المتغير خاص

يمكنك تعريف المتغير بشكل مباشر داخل العنصر و لكن عندها يكون بالإمكان استخدامه فقط في هذا العنصر.

تعريف المتغير بداخل العنصر يكون مفيد في حال واحدة فقط و هي إن أردت استخدام متغير تم تعريفه أساساً بداخل المحدد :root { } و لكنك أردت تغيير قيمته بشكل حصري بالنسبة لعنصر معين.

المتغيرات التي يتم تعريفها بشكل خاص تسمى Local Variables.


في المثال التالي قمنا بتعريف المتغير --primary بشكل مباشر في العنصر و من ثم قمنا باستخدامه لتحديد لونه.

المثال الأول

a {
--primary: crimson;
color: var(--primary);
}
a { --primary: crimson; color: var(--primary); }
جرب الكود

في المثال التالي قمنا بتعريف المتغير --primary كمتغير عام للصفحة بأكملها بداخل المحدد :root { } و لكننا أعدنا تعريفه بشكل خاص في العنصر الذي يملك الكلاس special.

المثال الثاني

:root {
--primary: #0275d8;
}
button {
color: var(--primary);
border: 2px solid color: var(--primary);
padding: 10px 20px;
}
a {
/* فقط <a> أعيد تعريفه بالنسبة للوسم --primary المتغير */
--primary: crimson;
color: var(--primary);
}
:root { --primary: #0275d8; } button { color: var(--primary); border: 2px solid color: var(--primary); padding: 10px 20px; } a { /* فقط <a> أعيد تعريفه بالنسبة للوسم --primary المتغير */ --primary: crimson; color: var(--primary); }
جرب الكود

المتغيرات مع إستعلامات الوسائط

يمكنك جعل المتصفح يقرر أي متغيرات يجب أن يستخدم بناءاً على إستعلامات الوسائط ( Media Queries ).

في المثال التالي قمنا بتعريف 4 متغيرات لتحديد أحجام الخط.
بعدها قمنا بجعل حجم الخط الإفتراضي يساوي قيمة المتغير --font-x4 و من ثم استخدمنا إستعلامات الوسائط لجعل حجم الخط يتغير على النحو التالي:

  • إذا كان حجم الشاشة الأقصى هو 976 بكسل سيتم استخدام قيمة المتغير --font-3.
  • إذا كان حجم الشاشة الأقصى هو 760 بكسل سيتم استخدام قيمة المتغير --font-x2.
  • إذا كان حجم الشاشة الأقصى هو 640 بكسل سيتم استخدام قيمة المتغير --font-x1.

مثال

:root {
--font-x1: 20px;
--font-x2: 24px;
--font-x3: 28px;
--font-x4: 32px;
}
h1 {
font-size: var(--font-x4);
}
@media (max-width: 976px) {
h1 {
font-size: var(--font-x3);
}
}
@media (max-width: 760px) {
h1 {
font-size: var(--font-x2);
}
}
@media (max-width: 640px) {
h1 {
font-size: var(--font-x1);
}
}
:root { --font-x1: 20px; --font-x2: 24px; --font-x3: 28px; --font-x4: 32px; } h1 { font-size: var(--font-x4); } @media (max-width: 976px) { h1 { font-size: var(--font-x3); } } @media (max-width: 760px) { h1 { font-size: var(--font-x2); } } @media (max-width: 640px) { h1 { font-size: var(--font-x1); } }
جرب الكود
الدرس التالي❯ ❮الدرس السابق