متغیر ها در css

چگونه متغیر های CSS را تعریف و استفاده کنیم

در جاوا اسکریپت برای اینکه متغیر ها را تعریف کنیم ابتدا از var استفاده می کردیم و پس از معرفی es6 با استفاده از const و let نیز توانستیم متغیر های خود را تعریف و سپس مقدار دهی کنیم.

مثال :

let a = 10;
const b = 20;
var c = 30;

ولی در css به جای استفاده از var ، let یا const از دو خط تیره قبل از نام متغیر استفاده کرده و آن را درون یک براکت قرار می دهیم.

مثال :

  :root {
  --main-color: red;
}

در این مثال root عنصر اصلی DOM را هدف قرار می دهد و به همین ترتیب ، می‌توانیم دامنه‌های محلی دیگری بر اساس انتخابگرهای CSS مختلف داشته باشیم.

سوالی که در مورد ویژگی های متغیر های css مطرح می شود این است که ، فرض کنید ما همان ویژگی CSS را در سطح عمومی و سطح محلی تعریف کرده‌ایم ، کدام مقدار ترجیح داده می‌شود؟

برای پاسخ به این سوال کد های زیر را در نظر بگیرید:

  <p>Learning about CSS Variables</p>
<div>Learning about CSS Properties</div>
<h4>CSS is fun</h4>

کد زیر را برای css در نظر بگیرید :

  :root {
  --main-color: red;
}
p {
  --main-color: blue;
  color: var(--main-color);
}
div {
  color: var(--main-color);
  --main-color: green;
}
h4 {
  color: var(--main-color);
}

با همین مثال ساده متوجه می شویم متغیرهای محلی اولویت بیشتری نسبت به متغیر های عمومی دارند.

دسترسی به متغیرهای CSS با استفاده از تابع () var

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

تابع () var نام ویژگی را به عنوان آرگومان می گیرد و در صورت وجود مقدار ، آن را بازیابی می کند و با CSS-Property واقعی جایگزین می کند.

پس بر خلاف سایر متغیرهای زبان در CSS ، مقادیر را ذخیره نمی کنند ، آنها فقط در هنگام استفاده آن را با مقدار واقعی CSS جایگزین می کنند.

تابع ()var همچنین می تواند برای ارائه یک مقدار بازگشتی در صورت عدم وجود ویژگی استفاده شود.

  div {
  font-size: var(--main-font-size, 16px);
}

استفاده از متغیرهای CSS در جاوا اسکریپت

برای بدست آوردن مقدار یک ویژگی سفارشی در زمان اجرا، از متد() getPropertyValue شی CSSStyleDeclaration محاسبه شده استفاده کنید.

برای تنظیم مقدار ویژگی سفارشی در زمان اجرا، از متد() setProperty شی CSSStyleDeclaration استفاده کنید.

مزایای استفاده از متغیرهای CSS

کد CSS زیر را در نظر بگیرید:

  :root {
  --main-font-color: #E9E9E9;
  --main-bg-color: rgba(128,128,0,1);
}
p {
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
}
span {
  color: #E9E9E9;
  background-color: rgba(128,128,0,1);
}

اکنون دو روش استفاده از CSS یعنی با استفاده از متغیرها و بدون استفاده از متغیرهای را می دانیم ، می خواهیم ببینیم که این روش چه مزایایی دارد:

سهولت در نگهداری

فرض کنید ساعت‌ ها برای انتخاب سبک ‌ها و رنگ‌ها ی مناسب کار کرده‌اید و نیاز است که آن استایل تغییر ‌کند ، برای تغییر باید کل پروژه را طی کنید ، حالا فرض کنید از متغیرهای CSS استفاده کرده‌اید ، می‌توانید مقدار ویژگی CSS را یک بار تغییر دهید و در همه جا استفاده کنید.

کد ها خواناتر می شود

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