آموزش متغیرهای CSS – عملکرد var

13 جولای 2021

متغیرهای CSS

این var()تابع برای درج مقدار متغیر CSS استفاده می شود.

متغیرهای CSS به DOM دسترسی دارند ، این بدان معناست که شما می توانید متغیرهایی با دامنه محلی یا جهانی ایجاد کنید ، متغیرها را با JavaScript تغییر دهید و متغیرها را براساس درخواستهای رسانه تغییر دهید.

یک روش خوب برای استفاده از متغیرهای CSS زمانی است که صحبت از رنگ طرح شما می شود. به جای کپی و چسباندن همان رنگ ها بارها و بارها ، می توانید آنها را در متغیرها قرار دهید.


راه سنتی

مثال زیر روش سنتی تعریف برخی از رنگها را در یک صفحه سبک (با تعریف رنگهای استفاده شده برای هر عنصر خاص) نشان می دهد:

مثال

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

نحو عملکرد var ()

این var()تابع برای درج مقدار متغیر CSS استفاده می شود.

نحو var()عملکرد به شرح زیر است:

var(--name, value)

توجه: نام متغیر باید با دو خط تیره (-) شروع شود و به حروف کوچک و بزرگ حساس است!


چگونه var () کار می کند

اول از همه: متغیرهای CSS می توانند دامنه ای جهانی یا محلی داشته باشند.

از طریق کل سند می توان به متغیرهای جهانی دسترسی داشت / استفاده کرد ، در حالی که متغیرهای محلی را می توان فقط در داخل انتخاب کننده ای که اعلام شده است ، استفاده کرد.

برای ایجاد یک متغیر با دامنه جهانی ، آن را در داخل :root انتخابگر اعلام کنید . :root سلکتور با عنصر ریشه سند است.

برای ایجاد یک متغیر با دامنه محلی ، آن را در داخل انتخابی که قرار است از آن استفاده کند اعلام کنید.

مثال زیر با مثال بالا برابر است ، اما در اینجا ما از var()تابع استفاده می کنیم.

اول ، ما دو متغیر جهانی را اعلام می کنیم (- آبی و – سفید). سپس ، از var()تابع برای وارد کردن مقدار متغیرها بعداً در صفحه سبک استفاده می کنیم:

مثال

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

مزایای استفاده از var () عبارتند از:

  • خواندن کد را آسان تر می کند (قابل درک تر)
  • تغییر مقادیر رنگ را بسیار آسان تر می کند

برای تغییر رنگ آبی و سفید به آبی و سفید ملایم ، فقط باید دو مقدار متغیر را تغییر دهید:

مثال

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

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

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از var()عملکرد پشتیبانی می کند.

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

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

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.