CSS – بازنویسی متغیرها (Overriding Variables)
لغو متغیرهای سراسری با متغیرهای محلی
همانطور که در صفحه قبلی یاد گرفتیم، متغیرهای سراسری را میتوان در سراسر سند استفاده کرد، در حالی که متغیرهای محلی فقط در سلکتوری که در آن تعریف شدهاند، استفاده میشوند.
در مثال زیر، متغیرهای سراسری برای رنگهای آبی و سفید تعریف شدهاند و از آنها در جاهای مختلف استفاده شده است:
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
لغو متغیر سراسری با متغیر محلی
گاهی اوقات میخواهیم که متغیرها فقط در یک بخش خاص از صفحه تغییر کنند. فرض کنید میخواهیم رنگ آبی دکمهها متفاوت باشد. در این حالت، میتوانیم متغیر --blue
را درون سلکتور دکمه دوباره تعریف کنیم. در این صورت، متغیر --blue
محلی مقدار متغیر سراسری را برای عنصر دکمه لغو خواهد کرد:
button {
--blue: #0000ff; /* متغیر محلی متغیر سراسری را لغو میکند */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
تعریف متغیر محلی جدید
اگر یک متغیر فقط در یک مکان خاص استفاده شود، میتوانیم یک متغیر محلی جدید تعریف کنیم. به عنوان مثال، در دکمه میتوانیم به جای تغییر متغیر سراسری، یک متغیر جدید به نام --button-blue
تعریف کنیم:
button {
--button-blue: #0000ff; /* متغیر محلی جدید */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
مزیت استفاده از متغیرهای محلی
با استفاده از متغیرهای محلی، میتوانیم بدون تغییر در کل سند، به راحتی استایل خاصی را برای یک بخش مشخص تغییر دهیم.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام