این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش کار با متغیرها یا Variables در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با متغیرها یا Variables در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با متغیرها یا Variables در CSS
متغیرها یا Variables در CSS در واقع تابعی هستش برای ایجاد و استفاده از ویژگی های CSS در یک صفحه وب ( جهت بالا بردن سرعت کدنویسی ، خوانایی کدها و .. ) می باشد.
بیشترین و اصلی ترین کاربرد متغیرها ، در پروژه های بزرگ می باشد ، مثلا یه پروژه ای که چندین فایل و هزاران دستور CSS داشته باشه ، اونموقع برای تغییرات فایل های CSS متغیرها خیلی میتونه بهمون کمک کنه.
فرض میکنیم من دستورات CSS زیر رو دارم :
خب ۲تا باکس داریم که رنگ زمینه و Padding و text-align داره و هرکدوم هم مقدار خودشو داره، خب باشه اوکی اینو میزاریم کنار
|
1 2 3 4 5 6 7 8 9 10 11 |
.Box1{ background-color:red; padding:10px; text-align:center; } .Box2{ background-color:red; padding:10px; text-align:center; } |
حال ممکنه من بخوام رنگ زمینه باکس ۱ و باکس ۲ رو تغییر بدم، یا مثلا بخوام مقدار Padding رو تغییر بدم، خب روش معمولی و دستیش اینه که مقدار background-color و Padding رو در داخل هر۲باکس تغییر بدیم.
ولی اگه ما از متغیرها استفاده کرده باشیم دیگه نیاز نیست بریم دونه به دونه دستورات رو ویرایش کنیم، خیلی راحت کافیه یه کلمه کد رو در متغیرها تغییر بدیم تا روی کل دستورات اعمال بشه.
Free-Learn
نحوه تعریف متغیرها در CSS
شکل کلی برای تعریف متغیرها در CSS بصورت زیر می باشد :
|
1 |
--Name : Value ; |
- Name : نام متغیر که میتونه دلخواه باشه
- Value : مقدار متغیر
مثال : تعریف متغیرها
|
1 2 3 4 5 |
:root{ --MyBgColor: #FF5722; --MyTextColor: #fff; --MyPadding: 10px; } |
Free-Learn
نحوه استفاده از متغیرها در ویژگی های CSS
شکل کلی برای استفاده از متغیرها در ویژگی های CSS بصورت زیر می باشد :
|
1 |
var( --Name , Value ); |
- -Name : نام متغیر
- Value : مقدار جایگزین
- باید اول ۲تا – ( دَش ) بزاریم بعدش نام متغیر رو بنویسیم
- نام متغیرها به حروف کوچک و بزرگ حساس می باشند
- مقدار جایگزین موقعی عمل میکنه که خوده متغیر تعریف نشده باشه
مثال : استفاده از متغیرها
|
1 2 3 4 5 6 7 8 9 10 11 12 |
:root{ --mybgcolor:#FF5722; --mytextcolor:#fff; --mypadding:10px; } .MyBox{ background-color:var(--my_bg_color); color:var(--mytextcolor); padding:var(--mypadding); text-align:var(--mytextcenter,center); } |
Free-Learn
متغیرهای عمومی و خصوصی
به متغیرهایی که در ریشه صفحه ( میشه همون root ) تعریف میشن بهشون میگیم متغیرهای عمومی یا جهانی یا Global و به متغیرهایی که در خوده تگ یا کلاس یا ID تعریف میشن بهشون میگیم متغیرهای محلی یا خصوصی یا Local
- متغیرهای عمومی یا جهانی در تمام صفحه در دسترس می باشند
- متغیرهای خصوصی فقط در همون تگ یا کلاس یا ID که تعریف شدن قابل دسترس می باشند
- اگه از متغیر عمومی و خصوصی همزمان استفاده بشه، فقط خصوصی اعمال میشه
مثال : تعریف متغیرهای جهانی یا عمومی یا Global
|
1 2 3 4 |
:root{ --my_bg_color:#FF5722; --mytextcolor:#fff; } |
مثال : تعریف متغیرهای خصوصی یا محلی یا Local
|
1 2 3 4 |
.MyBox{ --MyBg:yellow; /* متغیر خصوصی */ background-color:var(--MyBg); } |
Free-Learn
دسترسی و تغییر متغیرها با استفاده از جاوااسکریپت
ما با استفاده DOM در جاوااسکریپت میتونیم به متغیرها دسترسی پیدا کنیم و اونارو تغییر بدیم.
مثال : دسترسی و تغییر متغیرها از طریق زبان جاوا اسکریپت
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> // گرفتن ریشه صفحه var MyRoot = document.querySelector(':root'); // ست کردن مقدار جدید function My_Set(){ MyRoot.style.setProperty('--mybgcolor', '#2196F3'); } </script> |
Free-Learn
واکنش گرایی متغیرها در CSS
ما به راحتی میتونیم متغیرهارو در یک صفحه وب تغییر و واکنش گرا کنیم، مثلا میگیم فلان متغیر در فلان اندازه صفحه نمایش فلان مقدار رو داشته باشه. به همین راحتی
مثال شماره ۱ : وقتی اندازه صفحه کمتر از ۴۵۰ پیکسل شد، مقدار متغیرها تغییر میکنن
|
1 2 3 4 5 6 |
@media screen and (max-width: 450px){ :root{ --mybgcolor: yellow; --mytextcolor: #000; } } |
