آموزش تابع ()var در CSS

امتیاز

(0)

از تابع var() برای اضافه کردن مقدار یک متغیر CSS استفاده می شود. متغیرهای CSS به DOM دسترسی دارند؛ این یعنی اینکه ما می توانیم متغیرهایی را در CSS با میدان دیدِ(scope) محلی(local)، یا سراسری(global) ایجاد کنیم و این متغیرها را با جاوا اسکریپت و بسته به مدیا کوئری ها تغییر دهیم.

یک زمان مناسب، برای استفاده از متغیرهای CSS، زمانی است که بحث استفاده از رنگ ها به میان می آید. به جای اینکه رنگ های مشابهی را در کدها، بارها کپی و الصاق(paste) کنیم، می توانیم آنها را در متغیرها قرار دهیم.

تعریف یک متغیر در CSS

متغیرهای CSS، می توانند میدان دید محلی، یا سراسری داشته باشند. متغیرهای سراسری را می توان در تمام سند(document) مورد دسترسی قرار داد. درحالی که متغیرهای محلی را تنها می توانیم در سلکتوری که در آن تعریف شده اند، مورد استفاده قرار دهیم.

برای ایجاد یک متغیر سراسری(global) در CSS، آن را در سلکتور :root قرار دهید. سلکتور :root عنصرِ ریشه ی سند را مورد تطابق قرار می دهد. برای ایجاد یک متغیر محلی(local)، آن را درون سلکتوری که می خواهید از آن استفاده کنید، قرار دهید. نام یک متغیر CSS باید با دو خط تیره (--) آغاز شود و به حروف بزرگ و کوچک حساس است.

:root {
  --primary-bg-color: green; /* میدان دید سراسری */
}

.note {
  --note-bg: yellow; /* میدان دید محلی */
}

تابع `var()` در CSS

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

سینتکس یا شیوه ی نوشتاری:

var(--name, value)

توضیح	مقدار
ضروری. نام متغیر را مشخص می کند(باید با دو خط تیره شروع شود).	name
اختیاری. مقدار پشتیبان را مشخص می کند(اگر متغیر مورد نظر پیدا نشود، مورد استفاده قرار می گیرد).	value

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

باعث می شود نگهداری کدها آسان تر شود.
خوانایی کدها را افزایش می دهد.
باعث می شود تغییر مقادیر رنگ ها برای تمام صفحه، ساده تر شود.

مثالی از متغیرها در CSS

ما در اینجا، دو متغیر سراسری(--primary-bg-color و --primary-color) را تعریف می کنیم. سپس از تابع var() برای اضافه کردن مقدار این متغیرها در برگه های استایل، استفاده می کنیم:

مثال شماره 1

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

امتحان کنید

برای تغییر دادن ظاهر یک صفحه، فقط نیاز داریم مقدار این دو متغیر را تغییر دهیم:

مثال شماره 2

:root {
  --primary-bg-color: #8FBC8F;
  --primary-color: #FFFAF0;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}