CSSالمتغيرات

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

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

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

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

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

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

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

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

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

: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 {
    --fast: 0.3s;
    --slow: 1s;
}

input[name="search"] {
    width: 100px;
    transition: all ease-in-out var(--slow);
}

input[name="search"]:focus {
    width: 100%;
}

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

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

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

في المثال التالي قمنا بتعريف المتغير --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);
}

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

يمكنك جعل المتصفح يقرر أي متغيرات يجب أن يستخدم بناءاً على إستعلامات الوسائط ( 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);
    }
}