جاهز؟ إذا كان الأمر كذلك ، فلنبدأ.
المقدمة
متغيرات CSS هي قيم تم الإعلان عنها في CSS لغرضين. الأول هو إعادة استخدام هذه القيم. والثاني هو تقليل كمية كود CSS. لنلق نظرة على مثال بسيط.
عناصر صفحة التصميم
.section {
border: 2px solid #235ad1;
}
.section-title {
color: #235ad1;
}
.section-title::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #235ad1;
}
#235ad1يستخدم
مثال CSS هذا القيمة ثلاث مرات. تخيل أن هذا جزء من مشروع أكبر. في ذلك ، تنتشر الأنماط المتشابهة عبر العديد من ملفات CSS. لقد طُلب منك تغيير اللون #235ad1. في مثل هذه الحالة ، فإن أفضل ما يمكنك فعله هو استخدام قدرة محرري الكود على إيجاد واستبدال قيم السلسلة.
لكن استخدام متغيرات CSS يجعل هذه المهام أسهل بكثير. لنتحدث عن كيفية الإعلان عن متغيرات CSS. يجب أن يُسبَق اسم المتغير بشرطتين. دعنا نعلن عن متغير نمط لفئة
:rootالعنصر الزائفة <html>:
:root {
--color-primary: #235ad1;
}
.section {
border: 2px solid var(--color-primary);
}
.section-title {
color: var(--color-primary);
}
.section-title::before {
/* */
background-color: var(--color-primary);
}
في رأيي ، يبدو هذا الجزء من الكود أنظف بكثير من الجزء السابق. المتغير عام
--color-primaryلأنه تم التصريح عنه في نمط الفئة الزائفة :root. ولكن يمكن أيضًا الإعلان عن متغيرات CSS على مستوى العناصر الفردية ، مما يحد من نطاقها في المستند.
تسمية متغيرة
لا تختلف قواعد تسمية متغيرات CSS كثيرًا عن القواعد المستخدمة في لغات البرمجة المختلفة. وبالتحديد ، يمكن أن يشتمل اسم متغير CSS صالح على أحرف أبجدية رقمية وشرطات سفلية وواصلات. وتجدر الإشارة أيضًا إلى أن أسماء هذه المتغيرات حساسة لحالة الأحرف.
/* */
:root {
--primary-color: #222;
--_primary-color: #222;
--12-primary-color: #222;
--primay-color-12: #222;
}
/* */
:root {
--primary color: #222; /* */
--primary$%#%$#
}
نطاق متغير
إحدى الميزات المفيدة لمتغيرات CSS هي أنه يمكن تحديد نطاقها. تستند هذه الفكرة إلى نفس المبادئ التي يتم تطبيقها في لغات البرمجة المختلفة. على سبيل المثال - في JavaScript:
let element = "cool";
function cool() {
let otherElement = "Not cool";
console.log(element);
}
في هذا المثال ، المتغير عام
elementومتاح في الوظيفة cool(). لكن المتغير otherElementلا يمكن الوصول إليه إلا من جسم الوظيفة cool(). دعنا نلقي نظرة على هذه الفكرة كما هي مطبقة على متغيرات CSS.
:root {
--primary-color: #235ad1;
}
.section-title {
--primary-color: d12374;
color: var(--primary-color);
}
المتغير عام
--primary-color، يمكنك الرجوع إليه من أي عنصر في المستند. إذا تجاوزتها في كتلة .section-title، فسيؤدي ذلك إلى حقيقة أنه لا يمكن استخدام قيمتها الجديدة إلا في هذه الكتلة.
هنا رسم تخطيطي لشرح هذه الفكرة.
نطاق متغيرات CSS
هذا متغير
--primary-colorيستخدم لتعيين لون عناوين الأقسام. نحتاج إلى تخصيص لون العناوين لأقسام المؤلفين المميزين والمقالات الحديثة. لذلك ، في أنماط هذه الأقسام ، نتجاوز هذا المتغير. نفس الشيء يحدث مع المتغير--unit. فيما يلي الأنماط التي يعتمد عليها الرسم التخطيطي السابق.
/* */
:root {
--primary-color: #235ad1;
--unit: 1rem;
}
/* */
.section-title {
color: var(--primary-color);
margin-bottom: var(--unit);
}
/* , */
.featured-authors .section-title {
--primary-color: #d16823;
}
/* , */
.latest-articles .section-title {
--primary-color: #d12374;
--unit: 2rem;
}
استخدام القيم الاحتياطية
عادةً ما يتم استخدام "القيم الاحتياطية" للحفاظ على تشغيل المواقع في متصفحات لا تدعم بعض آليات CSS الحديثة. لكننا هنا لن نتحدث عن ذلك ، ولكن عن كيفية تعيين القيم المستخدمة في حالة عدم توفر متغيرات CSS المطلوبة. تأمل المثال التالي:
.section-title {
color: var(--primary-color, #222);
}
لاحظ أنه
var()يتم تمرير قيم متعددة إلى الوظيفة . الثاني ، #222سيتم استخدامه فقط إذا --primary-colorلم يتم تعريف المتغير . عند تحديد القيم الاحتياطية ، يمكنك أيضًا استخدام التركيبات المتداخلة var():
.section-title {
color: var(--primary-color, var(--black, #222));
}
يمكن أن يكون هذا النهج للعمل مع المتغيرات مفيدًا إذا كانت قيمة المتغير تعتمد على بعض الإجراءات. إذا حدث عدم وجود قيمة في متغير ، فمن المهم التفكير في استخدام قيمة احتياطية.
أمثلة وسيناريوهات لاستخدام متغيرات CSS
▍ التحكم في حجم المكون
مكونات ذات أحجام مختلفة
غالبًا ما تحتوي أنظمة التصميم ، على سبيل المثال ، على أزرار بأحجام مختلفة. كقاعدة عامة ، نتحدث عن ثلاثة أحجام (صغيرة ، عادية ، كبيرة). باستخدام متغيرات CSS ، من السهل جدًا وصف هذه الأزرار والعناصر المماثلة الأخرى.
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}
من خلال تغيير قيمة المتغير
--unitفي النطاق المقابل لمكون الزر ، نقوم بإنشاء متغيرات مختلفة للزر.
متغيرات CSS وألوان HSL
HSL (Hue، Saturation، Lightness - hue، Saturation، lightness) هو نموذج لوني يحدد فيه المكون H اللون ، وتحدد مكونات S و L تشبع اللون وخفة الإضاءة.
ألوان العنصر المحددة باستخدام HSL
:root {
--primary-h: 221;
--primary-s: 71%;
--primary-b: 48%;
}
.button {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
transition: background-color 0.3s ease-out;
}
/* */
.button:hover {
--primary-b: 33%;
}
لاحظ كيف جعلت لون الزر أغمق من خلال تقليل قيمة المتغير
--primary-b.
إذا كنت مهتمًا بموضوع استخدام الألوان في CSS - فإليك مقالتي حول هذا الموضوع.
▍ تغيير حجم العناصر مع الحفاظ على النسب
إذا كنت قد عملت في برنامج تصميم مثل Photoshop أو Sketch أو Figma أو Adobe XD ، فقد تكون على دراية باستخدام المفتاح
Shiftعند تغيير حجم الكائنات. بفضل هذه التقنية ، يمكنك تجنب تشويه نسب العناصر.
لا توجد آلية قياسية لتغيير حجم العناصر في CSS مع الحفاظ على نسبة العرض إلى الارتفاع. ولكن يمكن التحايل على هذا القيد باستخدام متغيرات CSS ، كما قد يتبادر إلى ذهنك.
ضبط أحجام العناصر باستخدام متغيرات CSS
افترض أن لدينا رمزًا يجب أن يكون عرضه وارتفاعه متماثلين. لتحقيق ذلك ، قمت بتحديد متغير CSS
--sizeواستخدمته لضبط عرض العنصر وارتفاعه.
.icon {
--size: 22px;
width: var(--size);
height: var(--size);
}
نتيجة لذلك ، اتضح أن هذه التقنية تحاكي استخدام مفتاح
Shiftعند تغيير حجم الكائنات. يكفي تغيير قيمة متغير واحد --size. تمت تغطية هذا الموضوع بمزيد من التفاصيل هنا .
التخطيطات القائمة على شبكة CSS
يمكن أن تكون متغيرات CSS مفيدة للغاية عند تصميم تخطيطات الصفحة بناءً على شبكة CSS. تخيل أنك بحاجة إلى جعل حاوية الشبكة تعرض العناصر الفرعية بناءً على عرض محدد مسبقًا للعناصر. بدلاً من إنشاء فئة لكل عرض تقديمي للعنصر ، مما قد يؤدي إلى تكرار رمز CSS ، يمكن حل هذه المهمة باستخدام متغيرات CSS.
تحجيم عناصر الشبكة باستخدام متغير CSS
.wrapper {
--item-width: 300px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
.wrapper-2 {
--item-width: 500px;
}
باستخدام هذا النهج ، يمكنك إنشاء تخطيط شبكة مرن مناسب للاستخدام في مشاريع متنوعة يسهل صيانتها. يمكن تطبيق نفس الفكرة على إنشاء خاصية
grid-gap.
.wrapper {
--item-width: 300px;
--gap: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}
.wrapper.gap-1 {
--gap: 16px;
}
استخدام المتغير --gap لتعيين خاصية الشبكة
تخزين القيم المتغيرة ببنية معقدة
▍ تدرجات CSS
أعني بـ "القيم ذات البنية المعقدة" ، على سبيل المثال ، شيئًا مثل التدرجات. إذا كان المشروع يحتوي على تدرج أو خلفية يتم استخدامها في العديد من الأماكن في المشروع ، فمن المنطقي تخزين أوصافهم في متغيرات CSS.
:root {
--primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}
.element {
background-image: var(--primary-gradient);
}
في مثل هذه الحالات ، من الممكن تخزين العناصر الفردية للقيم "المعقدة" في المتغيرات. هذا ، على سبيل المثال ، يمكن أن يكون زاوية التدرج:
.element {
--angle: 150deg;
background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}
.element.inverted {
--angle: -150deg;
}
تم إنشاء خيارات التدرج المختلفة عن طريق تغيير المتغير - المستطيل
▍ خلفية الموقف
كما ذكرنا سابقًا ، يمكن لمتغيرات CSS تخزين القيم المعقدة. يمكن أن يكون هذا مفيدًا إذا كان لديك عنصر ، بناءً على ما يحدث ، قد يحتاج إلى وضعه في أماكن مختلفة على الصفحة.
التحكم في موضع عنصر باستخدام المتغير --pos
.table {
--size: 50px;
--pos: left center;
background: #ccc linear-gradient(#000, #000) no-repeat;
background-size: var(--size) var(--size);
background-position: var(--pos);
}
قم بالتبديل بين المظاهر الداكنة والفاتحة
الآن ، تم تجهيز المواقع ، تقريبًا دون فشل ، بموضوع داكن وخفيف. لحل هذه المشكلة ، يمكنك استخدام متغيرات CSS ، وتخزين المعلومات حول الألوان فيها والتبديل بينها بعد تحليل معلمات النظام أو الإعدادات التي أجراها المستخدم.
موضوعات فاتحة ومظلمة
:root {
--text-color: #434343;
--border-color: #d2d2d2;
--main-bg-color: #fff;
--action-bg-color: #f9f7f7;
}
/* , <html> */
.dark-mode {
--text-color: #e9e9e9;
--border-color: #434343;
--main-bg-color: #434343;
--action-bg-color: #363636;
}
هنا عرض فيديو للفكرة أعلاه.
تحديد القيم الافتراضية
في بعض الحالات ، تحتاج إلى ضبط متغيرات CSS باستخدام JavaScript . لنفترض أننا نريد تعيين قيمة خاصية
heightلعنصر يمكن تغيير حجمه. تعلمت عن هذه التقنية من هذه المقالة.
المتغير
--details-height-openفارغ في البداية. من المخطط استخدامه في وصف نمط بعض العناصر. يجب أن يحتوي على ارتفاع العنصر بالبكسل. إذا لم تتمكن من تعيين قيمة هذا المتغير من JavaScript لسبب ما ، فمن المهم توفير بعض القيم الاحتياطية الافتراضية بدلاً من ذلك.
.section.is-active {
max-height: var(--details-height-open, auto);
}
في هذا المثال ، يتم لعب الافتراضي
auto. سيتم تطبيقه إذا فشلت JavaScript في تعيين قيمة المتغير --details-height-open.
ضبط عرض عنصر الحاوية
التحكم في عرض حاوية
عنصر الحاوية المستخدمة في صفحات الويب يمكن أن يكون لها أحجام مختلفة في مواقف مختلفة. ربما تحتاج إحدى الصفحات إلى حاوية صغيرة وأخرى قد تحتاج إلى حاوية أكبر. في مثل هذه الحالات ، يمكن استخدام متغيرات CSS بنجاح للتحكم في حجم الحاويات.
.wrapper {
--size: 1140px;
max-width: var(--size);
}
.wrapper--small {
--size: 800px;
}
الأنماط المضمنة
يمكن أن يؤدي استخدام متغيرات CSS في الأنماط المضمنة إلى فتح الكثير من الاحتمالات الجديدة لمطوري الواجهة الأمامية الذين لم يعرفوا أبدًا بوجودها. في الواقع، لقد كتبت بأكملها المادة عن هذا ، ولكن هنا سوف لا يزال الحديث عن الطرق الأكثر إثارة للاهتمام لاستخدام المتغيرات في أنماط المضمنة.
قد يكون من الأفضل عدم استخدام هذه الأساليب في الإنتاج. إنها مناسبة تمامًا للنماذج الأولية ولاستكشاف أفكار التصميم المختلفة.
▍ عناصر الشبكة الديناميكية
على سبيل المثال ، لضبط عرض عنصر ما ، يمكنك استخدام متغير
--item-widthمعرّف مباشرة في سمة العنصر style. يمكن أن يكون هذا الأسلوب مفيدًا عند إنشاء نماذج أولية لتخطيطات الشبكة.
ها هو HTML للعنصر:
<div class="wrapper" style="--item-width: 250px;">
<div></div>
<div></div>
<div></div>
</div>
هذا هو النمط المطبق على هذا العنصر:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
هنا يمكنك تجربة المثال الخاص بهذا القسم.
▍ تجسيدات المستخدم
الصور الرمزية ذات الأحجام المختلفة
استخدام آخر مثير للاهتمام لمتغيرات CSS في الأنماط المضمنة هو إنشاء عناصر بأحجام مختلفة. لنفترض أننا ، في مواقف مختلفة ، نحتاج إلى عرض الصورة الرمزية للمستخدم بأحجام مختلفة. ومع ذلك ، نريد التحكم في حجمه باستخدام متغير CSS واحد.
ها هي الترميز:
<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />
إليك الأنماط:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
دعنا نحلل هذه الأنماط:
- لدينا تصميم
var(--size, 1). يوفر قيمة افتراضية. يتم استخدامه إذا--sizeلم يتم تعيين قيمة المتغير باستخدام سمةstyleالعنصر المصمم. - تم تعيين الحد الأدنى لحجم العنصر على
30px*30px.
تساؤلات الإعلام
يمكن أن يؤدي استخدام متغيرات CSS واستعلامات الوسائط معًا إلى قطع شوط طويل نحو تخصيص قيم المتغيرات المستخدمة في جميع صفحات موقع الويب الخاص بك. أبسط مثال على استخدام هذه التقنية يتبادر إلى ذهني هو ضبط التباعد بين العناصر:
:root {
--gutter: 8px;
}
@media (min-width: 800px) {
:root {
--gutter: 16px;
}
}
نتيجة لذلك ،
--gutterستعتمد خصائص أي عنصر يستخدم المتغير على عرض إطار عرض المتصفح. بالنسبة لي ، هذه مجرد فرصة رائعة.
ميراث
تدعم متغيرات CSS الوراثة. إذا تم الإعلان عن متغير CSS داخل العنصر الأصلي ، فإن العناصر التابعة ترث هذا المتغير. لنلقي نظرة على مثال.
هنا HTML:
<div class="parent">
<p class="child"></p>
</div>
إليك الأنماط:
.parent {
--size: 20px;
}
.child {
font-size: var(--size);
}
.childيرث
العنصر متغيرًا --sizeمعلنًا في نمط العنصر .parent. العنصر .childلديه حق الوصول إلى هذا المتغير. أعتقد أن هذا ممتع للغاية. ربما تتساءل الآن كيف ستفيدنا. أعتقد أن المثال الواقعي التالي سيساعد في الإجابة على هذا السؤال.
الوراثة المتغيرة لـ CSS
هناك مجموعة من الأزرار بالمتطلبات التالية:
- القدرة على تغيير حجم جميع العناصر من خلال تحديد قيمة متغير واحد.
- يجب أن تتغير المسافة بين العناصر ديناميكيًا حسب حجمها. مع زيادة العناصر ، تزداد المسافة بينهما ، وتتناقص مع انخفاض.
إليك الترميز لهذا المثال:
<div class="actions">
<div class="actions__item"></div>
<div class="actions__item"></div>
<div class="actions__item"></div>
</div>
إليك الأنماط:
.actions {
--size: 50px;
display: flex;
gap: calc(var(--size) / 5);
}
.actions--m {
--size: 70px;
}
.actions__item {
width: var(--size);
height: var(--size);
}
لاحظ كيف استخدمت المتغير
--sizeعند تعيين خاصية لعناصر gapFlexbox. هذا يسمح ، بناءً على متغير --size، بتغيير المسافة بين العناصر ديناميكيًا.
مثال آخر على استخدام آلية الوراثة لمتغيرات CSS هو إعداد الرسوم المتحركة لـ CSS. أخذت هذا المثال من هنا .
@keyframes breath {
from {
transform: scale(var(--scaleStart));
}
to {
transform: scale(var(--scaleEnd));
}
}
.walk {
--scaleStart: 0.3;
--scaleEnd: 1.7;
animation: breath 2s alternate;
}
.run {
--scaleStart: 0.8;
--scaleEnd: 1.2;
animation: breath 0.5s alternate;
}
مع هذا النهج ، لا نحتاج إلى التصريح مرتين
@keyframes. أساليب .walkو .runتجاوز رثت قيم المتغيرات.
التحقق من صحة متغيرات CSS
إذا اتضح أن
var()هناك خطأ ما في متغير CSS الذي تم تمريره إلى الوظيفة ، فسيستبدل المتصفح قيمة هذا المتغير بالقيمة الأصلية (الموروثة) للخاصية المقابلة.
:root {
--main-color: 16px;
}
.section-title {
color: var(--main-color);
}
هنا ، يتم كتابة القيمة إلى المتغير
--main-colorالمستخدم لتعيين الخاصية . وهذا خطأ تماما. الملكية موروثة. يعمل المتصفح في هذه الحالة وفق الخوارزمية التالية:color16pxcolor
- هل الملكية قابلة للتوريث؟
إليك كيفية عمل المتصفح.
كيف يعمل المتصفح عند اكتشاف قيمة متغير CSS غير صالحة
ظهور مفهوم القيمة غير الصالحة أثناء الحساب
ما تمت مناقشته أعلاه ، من الناحية الفنية ، يسمى "غير صالح في وقت القيمة المحسوبة". يحدث الموقف الذي تظهر فيه هذه القيم عندما
var()يتم تمرير متغير CSS صالح إلى الوظيفة ، والتي تكون قيمتها غير مناسبة للكتابة إلى الخاصية التي يتم تكوينها بمساعدتها.
انظر إلى المثال التالي ، الذي أخذته من هذه المقالة:
.section-title {
top: 10px;
top: clamp(5px, var(--offset), 20px);
}
إذا كان المتصفح لا يدعم الوظيفة
clamp()، فهل سيستخدم القيمة المحددة في البناء كبديل top: 10px؟ للإجابة على هذا السؤال بإيجاز ، لا - لن يتم استخدامه. والسبب في ذلك هو أنه بحلول الوقت الذي يكتشف فيه المستعرض قيمة غير صالحة يحاول كتابتها إلى الخاصية ، سيكون قد تجاهل القيم الأخرى ، وفقًا لترتيب الأنماط المتتالية. أي أنها ستتجاهل ببساطة البناء top: 10px.
إليك ما تقوله مواصفات CSS عنها :
يوجد مفهوم القيمة غير الصالحة التي تظهر أثناء الحساب لأن الأخطاء المرتبطة بالمتغيرات لا تظهر ، على عكس الأخطاء النحوية الأخرى ، في المراحل المبكرة من النظام. لذلك ، اتضح أنه عندما يكتشف وكيل المستخدم أن قيمة المتغير غير صحيحة ، فإنه سيتجاهل بالفعل القيم الأخرى ، وفقًا لترتيب الأنماط المتتالية.
نتيجة لذلك ، اتضح أنه إذا كنت ترغب في استخدام ميزات CSS غير المدعومة على نطاق واسع بواسطة المتصفحات التي يتم تنفيذها باستخدام متغيرات CSS ، فأنت بحاجة إلى تطبيق التوجيه
@supports. هذه هي الطريقة التي يتم بها ذلك في المقالة أعلاه:
@supports (top: max(1em, 1px)) {
#toc {
top: max(0em, 11rem - var(--scrolltop) * 1px);
}
}
يجد مثيرة للاهتمام
▍ تخزين عناوين URL في المتغيرات
ربما تحتاج إلى تنزيل بعض الموارد المستخدمة في صفحات الويب الخاصة بك من مصادر خارجية. في مثل هذه الحالات ، يمكنك تخزين عنوان URL لهذه الموارد في متغيرات CSS.
:root {
--main-bg: url("https://example.com/cool-image.jpg");
}
.section {
background: var(--main-bg);
}
في هذه المرحلة ، قد يطرح السؤال ما إذا كان من الممكن التعامل مع بنيات العرض
var(--main-bg)باستخدام وظيفة CSS url(). تأمل المثال التالي:
:root {
--main-bg: "https://example.com/cool-image.jpg";
}
.section {
background: url(var(--main-bg));
}
لن يعمل هذا ، لأن الوظيفة
url()تفسر الهيكل بأكمله على var(--main-bg)أنه عنوان URL ، وهذا خطأ. بحلول الوقت الذي يحسب فيه المتصفح القيمة ، ستكون غير صحيحة بالفعل ، ولن يعمل البناء المدروس كما هو متوقع.
▍ تخزين قيم متعددة
يمكن تخزين قيم متعددة في متغيرات CSS. إذا كانت هذه قيم تبدو وكأنها يجب أن تبحث في المكان الذي تخطط لاستخدام المتغير فيه ، فسيعمل هذا البناء. لنلقي نظرة على مثال.
تبدو القيمة المتغيرة كما هو متوقع
هنا CSS:
:root {
--main-color: 35, 90, 209;
}
.section-title {
color: rgba(var(--main-color), 0.75);
}
هناك دالة
rgba()وقيم RGB ، مفصولة بفواصل ، ومخزنة في متغير CSS. يتم استخدام هذه القيم عند تحديد اللون. من خلال هذا النهج لاستخدام الوظيفة rgba()، يتمتع المطور بفرصة التأثير على القيمة المقابلة لقناة ألفا للون ، وضبط لون العناصر المختلفة.
العيب الوحيد لهذا الأسلوب هو أن اللون الذي تحدده الوظيفة
rgba()لا يمكن تعديله باستخدام أدوات مطور المتصفح. إذا كانت هذه الميزة مهمة عند العمل في مشروعك ، فمن المحتمل ألا تعمل الطريقة المذكورة أعلاه لاستخدام الوظيفة من أجلك rgba().
فيما يلي مثال على استخدام متغير CSS لتعيين خاصية
background:
:root {
--bg: linear-gradient(#000, #000) center/50px;
}
.section {
background: var(--bg);
}
.section--unique {
background: var(--bg) no-repeat;
}
يوضح هذا تصميم قسمين من الموقع. لا يجب أن يتكرر خلفية واحد منهم على طول
xو محاور y.
▍تغيير قيم CSS المتغيرة فيkeyframes Rule Body
إذا كنت قد قرأت المواصفات الخاصة بمتغيرات CSS ، فربما تكون قد صادفت المصطلح "ملوث بالرسوم المتحركة" هناك. يصف حقيقة أن قيم متغيرات CSS لا تصلح لتغييرات سلسة في القاعدة
@keyframes. لنلقي نظرة على مثال.
هنا HTML:
<div class="box"></div>
إليك الأنماط:
.box {
width: 50px;
height: 50px;
background: #222;
--offset: 0;
transform: translateX(var(--offset));
animation: moveBox 1s infinite alternate;
}
@keyframes moveBox {
0% {
--offset: 0;
}
50% {
--offset: 50px;
}
100% {
--offset: 100px;
}
}
الرسوم المتحركة في هذه الحالة لن تكون سلسة. سيأخذ المتغير ثلاث قيم فقط
0، 50pxو 100px. تنص مواصفات CSS على أن أي خاصية مخصصة مستخدمة في قاعدة ما @keyframesتصبح خاصية ملوثة بالرسوم المتحركة ، مما يؤثر على كيفية معالجتها بواسطة الوظيفة var()عند تحريك العناصر.
إذا احتجنا إلى تقديم رسم متحرك سلس في المثال السابق ، فيجب علينا القيام بذلك بالطريقة التي تم بها من قبل. أي أنك تحتاج إلى استبدال المتغير بخصائص CSS للعنصر الذي تريد تحريكه.
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
→ هنا مثالا
وأود أن المذكرة أنه بعد نشر هذا المقال، وأنا على علم أن
@keyframesذلك لا يزال من الممكن تحريك متغيرات CSS في . لكن لهذا ، يجب تسجيل المتغيرات باستخدام القاعدة @property. حتى الآن ، هذه الميزة مدعومة فقط بواسطة المتصفحات المستندة إلى Chromium.
@property --offset {
syntax: "<length-percentage>";
inherits: true;
initial-value: 0px;
}
هنا يمكنك تجربة مثال على هذه الميزة.
▍ الحساب
قد لا تكون على دراية بحقيقة أنه يمكن استخدام متغيرات CSS في العمليات الحسابية. دعنا نلقي نظرة على المثال الذي نظرنا إليه بالفعل عند الحديث عن الصور الرمزية:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
يعتمد حجم الصورة الرمزية على قيمة المتغير
--size. الافتراضي هو 1. هذا يعني أن حجم الصورة الرمزية الافتراضي هو 30px*30px. لاحظ الأنماط التالية وأن تغيير هذا المتغير سيغير حجم الصورة الرمزية.
.c-avatar--small {
--size: 2;
}
.c-avatar--medium {
--size: 3;
}
.c-avatar--large {
--size: 4;
}
أدوات مطور المتصفح ومتغيرات CSS
عند استخدام أدوات المطور لمتصفحات مختلفة ، هناك بعض الحيل المفيدة التي يمكن استخدامها لتسهيل العمل مع متغيرات CSS. دعنا نتحدث عنها.
عرض الألوان المحددة باستخدام المتغيرات
أجد أنه من المفيد أن أتمكن من رؤية اللون الموصوف بواسطة متغير CSS. هذه الميزة متاحة في متصفحي Chrome و Edge.
اعرض اللون الذي قدمه متغير CSS
القيم المحسوبة
لإلقاء نظرة على القيمة المحسوبة لمتغير CSS ، اعتمادًا على المتصفح ، حرك مؤشر الماوس فوق المتغير أو انقر على زر خاص.
عرض القيم المحسوبة
في جميع المتصفحات باستثناء Safari ، يمكن عرض القيم المحسوبة بمجرد تمرير مؤشر الماوس فوق متغير. في Safari ، تحتاج إلى النقر فوق زر به خطين للقيام بذلك.
الإدخال الكامل التلقائي
عند العمل في مشاريع كبيرة ، يصعب تذكر أسماء جميع متغيرات CSS المستخدمة فيها. ولكن مع إمكانات الإكمال التلقائي المتوفرة في متصفحات Chrome و Firefox و Edge ، فهذه ليست مشكلة.
إكمال اسم المتغير
حتى تعمل هذه الآلية - فقط ابدأ في إدخال اسم المتغير.
▍ تعطيل متغيرات CSS
إذا احتاج متغير CSS إلى التعطيل من جميع العناصر التي تستخدمه ، فيكفي إلغاء تحديد المربع المجاور للمتغير في العنصر الذي تم الإعلان عنه فيه.
مربعات اختيار لتعطيل CSS Variables
النتيجة
لقد غطيت الكثير عن CSS Variables. أتمنى أن تجد ما تعلمته اليوم مفيدًا.
هل تستخدم متغيرات CSS في مشاريعك؟
