آموزش کار با متغیرها یا variables در css

برای دسترسی به اطلاعات متغیرها در CSS باید از تابع var() استفاده کنید. متغیرهای CSS دسترسی به DOM دارند، به این معنی که می‌توانید متغیرهایی با دسترسی local یا global ایجاد کنید، میتوانید متغیرها را با جاوااسکریپت بر اساس media queries تغییر دهید. این روش زمانی به کار می آید که شما دیگر نیاز به کپی/پیست کردن hex رنگ‌های قالب ندارید و می‌توانید از این متغیرها استفاده کنید. به عنوان مثال، می‌توانید رنگ‌های مورد استفاده در طراحی خود را در متغیرهای CSS قرار دهید تا بارها و بارها نیاز به تکرار آن‌ها را نداشته باشید.

کد CSS بدون استفاده از var

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

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)

name: الزامی است، برای مشخص کردن اسم متغیر استفاده میشود. (اسم متغیر باید با دو تا dash (--) شروع بشود)

value: اختیاری است، برای مشخص کردن مقدار جایگزین متغیر استفاده میشود. (مقدار جایگزین در صورتی که اسم متغیر پیدا نشود)

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

تابع var() چطوری کار میکند؟

متغیرهای CSS دارای دو نوع دسترسی local و global می باشند.

متغیرهای global را میتوان از طریق document مورد دسترسی/استفاده قرار داد، در صورتی که متغیرهای local را میتوان تنها در داخل selector که در آن معرفی شده استفاده کرد.

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

برای ایجاد یک متغیر با دسترسی local، آن را درون selector مورد نظر که قرار است از آن استفاده شود، اعلام کنید.

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

ابتدا، دو متغیر global با اسامی (–blue و --white) را معرفی می کنیم. سپس، از تابع 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() در کد:

• 1. خوانایی کد را افزایش میدهد.
• 2. تغییر مقدار متغیرها خیلی سریع تر و راحت تر است.

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

: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() پشتیبانی می کند.

Chrome: 49.0 +

Microsoft Edge: 15.0 +

Firefox: 15.0 +

Safari: 9.1 +

Opera Mini: 36.0 +

در این مقاله با متغیرها یا variables در css آشنا شدید. امیدوارم که این مقاله برای شما مفید واقع شده باشد؛ در صورتی که برای شما در خصوص این مقاله سوالی پیش آمده است، حتما در قسمت کامنت‌ها برای ما ارسال کنید.

منبع: وبسایت میموک