متغیرها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی‌های شخصی‌سازی شده در 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 استفاده می‌کند:

مثال
 1 :root {
 2   --main-bg-color: coral;
 3 }
 4 
 5 #div1 {
 6   background-color: var(--main-bg-color);
 7 }
 8 
 9 #div2 {
10   background-color: var(--main-bg-color);
11 }


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

مثال
 1 :root {
 2   --main-bg-color: coral;
 3   --main-txt-color: blue;
 4   --main-padding: 15px;
 5 }
 6 
 7 #div1 {
 8   background-color: var(--main-bg-color);
 9   color: var(--main-txt-color);
10   padding: var(--main-padding);
11 }
12 
13 #div2 {
14   background-color: var(--main-bg-color);
15   color: var(--main-txt-color);
16   padding: var(--main-padding);
17 }


تابع var() در CSS

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


منابع آموزشی