كيفية استخدام متغيرات CSS مثل المحترفين

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

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

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

لجعل أوراق الأنماط أكثر ترتيبًا وقابلية للصيانة وإعادة الاستخدام ، يمكنك استخدام متغيرات CSS في أي خاصية تقبل قيمة.

خذ المثال التالي لملف HTML وملف CSS لا يستخدم متغيرات CSS.

لغة البرمجة:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>متغيرات CSS - متغيرات الأزرارعنوان>
<وصلةrel="ورقة الأنماط"href="Variables.css" />
رأس>
<جسم>
<شعبة>
<h1>متغيرات CSSh1>
<شعبة>
فصل="btn sub-Primary"> أساسي </button>
فصل="btn"> ثانوي/button>
شعبة>
شعبة>
جسم>
لغة البرمجة>

CSS:

.btn {
حشوة: 1rem 1.5rem;
 الخلفية: شفافة.
 وزن الخط: 700 ؛
 لون احمر؛
}

هذا ما يجب أن تبدو عليه صفحتك:

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

مثل معظم لغات البرمجة ، يجب عليك تهيئة واستبدال متغيرات CSS.

لتهيئة متغير CSS ، ابدأ اسم المتغير بواصلات مزدوجة:

:جذر{
/ * متغير CSS * /
--variable_name: القيمة ؛
}

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

لاستبدال المتغير في نمط CSS الخاص بك ، ستستخدم الامتداد فار () ملكية:

:جذر {
/ * متغير CSS * /
 --أساسي: # 900c3f ؛
 --ثانوي: # ff5733 ؛
}
.btn {
حشوة: 1rem 1.5rem;
 الخلفية: شفافة.
 وزن الخط: 700 ؛
 لون: فار(--أساسي)؛
 لون الخلفية: فار(--ثانوي)؛
}
.sub-Primary {
 لون: فار(--ثانوي)؛
 لون الخلفية: فار(--أساسي)؛
}

يحتوي محدد الجذر على متغيرين: --أساسي و --ثانوي. ثم يتم استبدال كلا المتغيرين في .btn فئة كلون ولون خلفية على التوالي.

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

ال فار () يمكن أن تأخذ الخاصية أيضًا وسيطة ثانية. تعمل هذه الوسيطة كقيمة احتياطية للوسيطة الأولى في الحالة التي لا يتم فيها تعريف الوسيطة الأولى أو تكون غير صالحة.

على سبيل المثال:

:جذر {
 --أساسي: # 900c3f ؛
 --ثانوي: # ff5733 ؛
}
.btn {
حشوة: 1rem 1.5rem;
 الخلفية: شفافة.
 وزن الخط: 700 ؛
 لون: فار(- أساسي ، أزرق) ؛
}

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

معالجة متغيرات CSS وتجاوزها باستخدام JavaScript

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

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

فيما يلي مثال على كيفية استخدام JavaScript لتحديث قيمة متغير CSS.

لغة البرمجة:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>متغيرات CSS - متغيرات الأزرارعنوان>
<وصلةrel="ورقة الأنماط"href="Variables.css" />
<النصي>
وظيفةغير اللون() {
// احصل على العنصر الذي تريد تغيير المتغير عليه
مقدار ثابت myElement = وثيقة.querySelector (":جذر");
// احصل على القيمة الحالية للمتغير
يترك currentValue = getComputedStyle (myElement) .getPropertyValue (
"--ثانوي"
 );
 // تعيين ال جديدقيمةل ال عامل
myElement.أسلوب.setProperty("--ثانوي", "# DAF7A6");
 }
النصي>
رأس>
<جسم>
<شعبة>
<h1>متغيرات CSSh1>
<شعبة>
فصل="btn sub-Primary" onclick ="غير اللون()">
 أساسي
زر>
فصل="btn"> ثانوي/button>
شعبة>
شعبة>
جسم>
لغة البرمجة>

CSS:

:جذر {
 --أساسي: # 900c3f ؛
 --ثانوي: # ff5733 ؛
}
.btn {
حشوة: 1rem 1.5rem;
 الخلفية: شفافة.
 وزن الخط: 700 ؛
}
.sub-Primary {
 لون: فار(--أساسي)؛
 لون الخلفية: فار(--ثانوي)؛
}

في كود JavaScript هذا ، فإن ملف غير اللون() تعمل الوظيفة على تحديث لون الزر الأول عندما ينقر المستخدم عليه.

استخدام طرق اجتياز DOM، يمكنك الوصول إلى الفئات أو المحددات المطبقة في مستند HTML الخاص بك ومعالجة القيم.

قبل النقر فوق الزر:

بعد النقر على الزر:

يمكنك أيضًا استخدام JavaScript لإنشاء متغيرات CSS جديدة أو إزالتها تمامًا.

على سبيل المثال:

// يخلق أ جديدعامل
وثيقة.documentElement.style.setProperty ('--لون جديد', 'أزرق');
// إزالة متغير
وثيقة.documentElement.style.removeProperty ('--لون جديد');

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

تم تحقيق استخدام المتغيرات ضمن تقنية الواجهة الأمامية في البداية باستخدام معالجات CSS الأولية مثل SASS و LESS و Stylus.

الغرض من معالجات CSS الأولية هو تطوير كود يوسع القدرات الأساسية لمعيار CSS. ثم قم بتجميع هذا الرمز في CSS قياسي حتى يفهمه المتصفح ، مثل الكثير كيف يعمل TypeScript مع JavaScript.

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

يمكنك تحديد متغير SASS اللون الرئيسي $ واستخدامها لتعيين قيمة متغير CSS. ثم استخدم متغير CSS في فئة نمط عادي.

يمكنك أيضًا استخدام وظائف SASS لمعالجة قيم متغيرات CSS.

على سبيل المثال:

:جذر {
 - الأساسي: اللون الرئيسي $ ؛
 - ثانوي: تفتيح (فار(--أساسي)، 20%);
}
.btn {
 لون: فار(--أساسي)؛
 لون الخلفية: فار(--ثانوي)؛
}

هنا ، وظيفة SASS تفتيح () يتلاعب بقيمة --أساسي للحصول على قيمة --ثانوي.

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

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

نصائح لاستخدام متغيرات CSS في تطوير الويب

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

ابدأ باتفاقية تسمية واضحة

اختر اصطلاح تسمية للمتغيرات الخاصة بك تجعلها سهلة الفهم والاستخدام. على سبيل المثال ، استخدم بادئة مثل --لون- لمتغيرات اللون أو - تباعد- لتباعد المتغيرات.

استخدم المتغيرات في استعلامات الوسائط لتسهيل ضبط التصميم حسب أحجام الشاشات المختلفة.

استفد من الطبيعة المتتالية لـ CSS

تذكر أن متغيرات CSS متتالية ، مما يعني أنه إذا قمت بتعيين متغير على عنصر أصلي ، فسيؤثر على جميع العناصر الفرعية الخاصة به.

استخدم متغيرات CSS بحذر

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

اختبر المتغيرات الخاصة بك

تعد متغيرات CSS طريقة فريدة لكتابة تعليمات برمجية واضحة وقابلة للصيانة داخل ورقة الأنماط الخاصة بك.

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