این آموزش در تاریخ ۱۴۰۰/۱۰/۲۰ آپدیت شده است.
آموزش تابع Var در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع Var در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع Var در CSS
با استفاده از تابع var در CSS میتوان متغیرهایی با نام دلخواه و با استفاده از مقادیر سفارشی ایجاد کرد ، سپس از این متغیرهای دلخواه به عنوان مقادیر ویژگی های CSS استفاده کرد.
اصلی ترین کاربرد متغیرها در پروژه های بزرگ می باشد ، مثلا یه پروژه ای که چندین فایل و هزاران دستور CSS داشته باشه ، اونموقع برای تغییر دستورات CSS ،متغیرها خیلی میتونه بهمون کمک کنه.
حتما و حتما آموزش کار با متغیرها در CSS رو مشاهده نمایید.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع Var در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> :root{ --mybgcolor:#FF5722; --mytextcolor:#fff; --mypadding:10px; } .MyBox{ background-color:var(--mybgcolor); color:var(--mytextcolor); padding:var(--mypadding); text-align:var(--mytextcenter,center); } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع var در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()var | ۴۹ | ۳۱ | ۳۶ | ۹٫۱ | ۱۵ |
Free-Learn
شکل نوشتاری
شکل کلی برای تعریف متغیرها در CSS بصورت زیر می باشد :
|
1 |
--Name : Value ; |
- Name : نام متغیر که میتونه دلخواه باشه
- Value : مقدار متغیر
مثال : تعریف متغیرها در ریشه یا روت صفحه ( ریشه یا روت صفحه میشه root )
|
1 2 3 4 5 |
:root{ --MyBgColor: #FF5722; --MyTextColor: #fff; --MyPadding: 10px; } |
شکل کلی برای استفاده از متغیرها در ویژگی های CSS بصورت زیر می باشد :
|
1 |
var( --Name , Value ); |
- -Name : نام متغیر
- Value : مقدار جایگزین
- باید اول ۲تا – ( دَش ) بزاریم بعدش نام متغیر رو بنویسیم
- نام متغیرها به حروف کوچک و بزرگ حساس می باشند
- مقدار جایگزین موقعی عمل میکنه که خوده متغیر تعریف نشده باشه
Free-Learn
نکات و توضیحات
- توجه داشته باشید که حتما باید موقع تعریف متغیرها اول ۲تا – – ( دَش ) بزاریم، بعدش نام متغیر، که این نام میتونه یه نام دلخواه باشه، مثلا من برای رنگ زمینه تعریف کردم MyBgColor و..
