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;
}

مزیت استفاده از متغیرهای محلی

با استفاده از متغیرهای محلی، می‌توانیم بدون تغییر در کل سند، به راحتی استایل خاصی را برای یک بخش مشخص تغییر دهیم.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.