متغيرات CSS في Pure CSS - البدء في 5 دقائق أو أقل

تعد متغيرات CSS (أو رسميًا: الخصائص المخصصة ) في CSS الخالصة موفرًا كبيرًا للوقت لأي شخص يرغب في استثمار خمس دقائق في تعلم كيفية استخدامها. لقد كانت موجودة منذ CSS3 ، و 92٪ من المستخدمين لديهم متصفحات تدعمهم. لا يتطلب استخدام متغيرات CSS أي تغييرات مهمة في أوراق الأنماط الحالية أو الأدوات الجديدة ويمكن تطبيقها بسهولة على المشاريع القديمة. بدلاً من كتابة رمز لون سداسي عشري في مئات الأماكن في ملف ، يمكنك تحديده في مكان واحد فقط - باستخدام متغير CSS. يوفر الكثير من الوقت ويساعد في جعل أوراق الأنماط أكثر اتساقًا.

انتظر ، هذا Saas أو Less ، صحيح؟

لا ، نحن نتحدث عن CSS النقي هنا ، وليس CSS مقرونًا بمعالج أولي مثل Saas أو Less أو SCSS. لا يتطلب استخدام متغيرات CSS أي أدوات أو محررات أو تغييرات إضافية في سير عملك أو أي شيء آخر تستخدمه. لذلك ، لا تتطلب ملفات CSS الحالية التي لا تحتوي على متغيرات أي تغييرات "خاصة" ، ويمكنك المزج والمطابقة - استخدم المتغيرات فقط لأجزاء من الملف ، أو في بعض الملفات فقط يكون مشروعك.

تدعم معالجات CSS التمهيدية مثل Saas أو Less المتغيرات أيضًا. أيضًا ، لديهم الكثير من الوظائف والخيارات التي يمكنك استخدامها. ومع ذلك ، كما يوحي الاسم ، فإنها تتطلب معالجًا أوليًا - أداة تحول CSS المكتوبة بلغة Saas إلى CSS خالص. إذا كنت بحاجة إلى متغيرات فقط - فإن CSS الخالصة بها كل ما تحتاجه.

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

لنقم بإنشاء بعض المتغيرات

كما هو الحال في أي لغة برمجة ، هناك خطوتان لاستخدام المتغيرات : إعطائها قيمة (تحديدها) واستخدامها (وضعها في جميع الأماكن التي تحتاج فيها إلى هذه القيمة). سنفعل نفس الشيء.

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

إذا كنت تريد استخدام متغير عالميًا (في أي مكان) في ملف CSS ، فعليك تحديده في فئة :root الزائفة. لا يهم الموقع في الملف. يمكن أن يكون في بداية الملف أو نهايته. لكن عليك أن تضع المتغير في :root . يجب أن يبدأ الاسم بشرطة مزدوجة -- ولا يمكن أن يحتوي على أي مسافات. يمكن أن تحتوي متغيرات CSS على أي قيمة تقوم عادةً بتعيينها لخاصية CSS ؛ من القيم البسيطة مثل الألوان إلى التعبيرات المعقدة لخصائص الاختزال مثل الخلفية أو الظل.

لاستخدام متغير (للحصول على قيمته) ضعه في دالة var() . لا تنس أن جميع أسماء المتغيرات تبدأ بـ -- . هذا كل ما تحتاج إلى معرفته للبدء.

استخدام القيم الاحتياطية

في حالة عدم تحديد المتغير ، يمكن توفير قيمة احتياطية لوظيفة var() كمعامل ثاني.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

لا تقلق إذا كانت قيمة العقار معقدة. تسمح المعلمة الاحتياطية بالفواصل (انظر مثال box-shadow ). كما يسمح أيضًا بتسلسل وظائف var() المتعددة كما هو موضح للون في .custom-text . إذا كان --my-red --my-blue ، فسيتم استخدام اللون الأحمر كلون.

يعمل الجمع بين var() و calc() أيضًا ، دون أي مفاجآت في بناء الجملة. إليك مثال يتضمن متغيرًا محليًا متاحًا فقط في الفصل الذي تم تعريفه فيه.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

استخدم calc() باعتدال. إنه ليس شيئًا سيئًا ولكن عند الإفراط في الاستخدام يصبح من الصعب جدًا تصحيح الأخطاء وصيانتها.

الحصول على متغيرات CSS وضبطها عبر JavaScript

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

لإنشاء متغير جديد ، أو تغيير قيمة أحد المتغيرات الموجودة ، استخدم:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

الوصول إلى متغير أكثر تعقيدًا بعض الشيء. إذا تم تعريف المتغير عبر JS ، فاستخدم:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

ومع ذلك ، إذا تم تعريفه عبر CSS (وعادة ما يكون كذلك) ، فاستخدم هذا الرمز:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

المشاكل والأشياء التي يجب البحث عنها

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

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

لم تحقق شيئًا. لقد حصلت للتو على --spacing-10 بدلاً من 10 10px . ستنتهي قريبًا بإنشاء عشرين متغيرًا إضافيًا لكل قيمة من وحدات البكسل المتروكة من 5 بكسل إلى 100 بكسل. إذا كنت تريد الاتساق ، فانتقل إلى مفهوم --small-padding, --medium-padding, --large-padding وتعيين القيم العددية المناسبة.

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

لا يوجد سبب لعدم استخدام متغيرات CSS

على الإنترنت ، تتحرك الأشياء سريعًا (مثل استبدال ملفات تعريف الارتباط بالتخزين المحلي). بالنسبة للمشاريع الكبيرة والفرق الكبيرة ، فإن التحول إلى معالجات CSS الأولية مثل Saas هو الطريقة الصحيحة للذهاب. ومع ذلك ، بالنسبة للمشاريع الأصغر أو المشاريع الحالية التي تتطلب صيانة ، فإن متغيرات CSS في CSS الخالص هي الحل الصحيح . لا تتطلب أي تغييرات أو ترقيات للبرامج أو الأدوات أو أي شيء على الإطلاق. أنت تحدد متغيرًا وتبدأ في استخدامه.