متغیرها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

ویژگی‌های شخصی‌سازی شده در CSS

تابع var() می‌تواند برای درج مقدار یک ویژگی شخصی‌سازی شده استفاده شود.[۱]

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

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

Function Chrome Internet Explorer / Edge Firefox Safari Opera
var() ۴۹٫۰ ۱۵٫۰ ۳۱٫۰ ۹٫۱ ۳۶٫۰

تابع var()

متغیرها در CSS می‌بایست درون انتخابگری CSS تعریف شوند که دامنه (scope) آن را تعریف می‌کند. برای دامنه سراسری می‌توانید از انتخابگر :root یا body استفاده کنید.

نام متغیر می‌بایست با دو خط تیره شروع شود و حساس به حروف کوچک و بزرگ است.

شیوه نوشتار تابع var()به صورت زیر است:

var(custom-name, value)
ویژگی توضیحات
custom-name اجباری است. نام ویژگی شخصی‌سازی شده‌است (می‌بایست با دو علامت خط تیره -- شروع شود)
value اختیاری است. مقدار بازگشتی (هنگامی که ویژگی شخصی‌سازی شده نامعتبر است استفاده می‌شود)

مثال زیر ابتدا یک ویژگی شخصی‌سازی شده سراسری به نام "--main-bg-color" تعریف می‌کند، سپس از تابع var() بعداً برای درج مقدار ویژگی شخصی‌سازی شده در style sheet استفاده می‌کند:

مثال

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}


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

مثال

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}


تابع var() در CSS

ویژگی توضیحات
var() مقدار یک ویژگی شخصی‌سازی شده را درج می‌کند

منابع آموزشی