متغیرها

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

ویژگی‌های شخصی‌سازی شده در 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() مقدار یک ویژگی شخصی‌سازی شده را درج می‌کند

منابع آموزشی[ویرایش]