متغیر های CSS
- سه شنبه, ۱ مرداد ۱۳۹۸، ۰۲:۴۱ ق.ظ
متغیرها جلوی این اتفاق را می گیرند، با استفاده از آنها می توان آن رنگ را در یک مکان ذخیره کرد و از آن به
بعد در هرکجا که آن مقدار را لازم داشتیم به آن مکان اشاره کنیم. این یعنی برای تغییر فقط کافی است یک
مکان را تغییر دهیم.
فایده دیگر متغیرها معناگرا بودن آنها است. به عنوان نمونه درک main-text-color به مراتب ساده از#03A9F4 می باشد.
چگونه از متغیرها استفاده کنیم؟
هرگونه مقداری از ویژگی های سی اس اس می تواند در یک متغیر ذخیره شود. آن مقدار می تواند یک اندازه، رنگ و حتی یک موقعیت باشد. کافی است نامی برای متغیرمان انتخاب کرده و قبل از نام باید -- را به عنوان پیشوند قرار دهیم. متغیرها نیز مانند تمام ویژگی های سی اس اس برای یک عنصر که توسط یک انتخابگر فراخوانده شده، نوشته می شوند.
مثال:
body {
--main-color: #7F583F;
}
در بالا متغیری با نام --main-color به وجود آوردیم و رنگ اصلی سایت را درون آن ذخیره کردیم، حال هر زمان که به آن رنگ احتیاج داشته باشیم می توانیم توسط تابع var() به آن متغیر اشاره کرده و در نتیجه از رنگ مورد نظرمان استفاده کنیم. به عنوان نمونه می خواهیم متن تمامی عناصر لینک رنگ اصلی سایت را داشته باشد:
a {
color: var(--main-color);
}
اگر بعد از استفاده از متغیر به Devtools مرورگر برویم و رنگ عناصر لینک را بررسی کنیم خواهیم دید که مرورگر رنگ را با مقدار #7F583F نمایش نمی دهد بلکه آن را با --main-color معرفی می کند. این یعنی متغیرها نیز مانند تمام ویژگی های سی اس اس در زمان اجرا به حیات خود ادامه می دهند و قابل تغییر هستند!
وقتی از تابع var() استفاده می کنیم می توانیم یک مقدار اختیاری را به عنوان مقدار پیشفرض به این تابع بدهیم.
این کار چه کاربردی دارد؟
اگر متغیر ما تعریف نشده باشد و یا به هر دلیلی در زمان استفاده در دسترس نباشد این مقدار پیشفرض به جای مقدار متغیر برای ویژگی مربوطه تعیین می شود.
color: var(--main-color, #7F583F)
همچنین می توان برای مقدار پیشفرض از یک متغیر دیگر نیز استفاده کرد:
.box {
padding: var(--box-padding, var(--main-padding));
}
متغیر ها نسبت به حروف کوچک و بزرگ حساس هستند این یعنی متغیر های --header-color و --Header-Color با هم متفاوت هستند.
محدوده یک متغیر و Cascade
مثل متغیرها در زبان های دیگر برنامه نویسی متغیرهای سی اس اس نیز Scope یا محدوده خاص خود را دارند که می توانند در آن محدوده مورد استفاده قرار بگیرند.
در CSS این محدوده با توجه به ساختار عناصر در HTML تعیین می شود. مثلا اگر متغیری را در محدوده عنصر<html> تعریف کنیم با توجه به مفهموم Cascade در سی اس اس آن متغیر برای تمامی عناصر صفحه در دسترس است چرا که تمام عناصر صفحه فرزند عنصر <html> می باشند.
به این نوع متغیرها، متغیرهای سراسری یا Global گفته می شود چرا که در همه جا در دسترس هستند.
html { --gutter: 2rem; }
همچنین می توان با استفاده از انتخابگر root متغیر سراسری تعریف کرد چرا که این انتخابگر به عنصر ریشه یا همان <html> اشاره می کند:
:root {
--gutter: 2rem;
}
تنها تفاوت انتخابگر html و :root در ارجحیت آنها است. اگر متغیری با استفاده از :root تعریف شود ارجحیت بیشتری دارد و همانطور که می دانیم ارجحیت بیشتر یعنی مقداری که نهایتا اعمال می شود.
حال اگر مثلا برای عنصر پاراگرافی با کلاس .content یک متغیر تعریف کنیم آن متغیر فقط برای عناصر پاراگراف با همان کلاس و فرزندانشان در دسترس خواهند بود یعنی آن متغیر به سمت پایین Cascade می شود. (آبشار به سمت بالا که نداریم دیگه :) پس مسلما پدران این عناصر به این متغیر دسترسی ندارند)
p.content {
--content-text-color: #333;
}
به این نوع متغیرها که در یک محدوده خاص قابل دسترس هستند متغیرهای محلی یا Local گفته می شود.
HTML زیر را در نظر بگیرید:
global
<div class="enclosing">
enclosing
<div class="closure">
closure
</div>
</div>
حال فرض کنید با توجه به ساختار عناصر متغیرهایی بصورت زیر تعریف کنیم:
:root {
--globalVar: 10px;
}
.enclosing {
--enclosingVar: 20px;
font-size: var(--closureVar); /* چون این متغیر در این محدوده در دسترس نیست ویژگی اندازه فونت مقدارش تغییر نمی کند */
}
.enclosing .closure {
--closureVar: 30px;
/* با توجه به آبشاری بودن سی اس اس و ساختار عناصر در این مثال تمام این متغیر ها در این محدوده در سترس هستند */
font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar));
/* 60px */
}
انجام عملیات ریاضی بر روی متغیرها
وقتی پای متغیرها به میان می آید انجام عملیات ریاضی رو آنها نیز به دنبالشان خواهد آمد چرا که خیلی از مشکلات را می توان به راحتی حل کرد. در سی اس اس با استفاده از تابع calc این کار امکان پذیر است.
:root{
--indent-size: 10px;
--indent-xl: calc(2*var(--indent-size));
--indent-l: calc(var(--indent-size) + 2px);
--indent-s: calc(var(--indent-size) - 2px);
--indent-xs: calc(var(--indent-size)/2);
}
اگر یک متغیر داشته باشیم که بدون واحد است ولی برای استفاده از آن متغیر نیاز داریم که به آن واحد مورد نظرمان را اضافه کنیم، برای این کار نیز می توانیم به صورت زیر از تابع calc استفاده کنیم:
:root{
--spacer: 10;
}
.box{
padding: var(--spacer)px 0; /* غلط */
padding: calc(var(--spacer)*1px) 0; /* درست */
}
تفاوت متغیرهای CSS و متغیرهای پیش پردازنده هایی مثل Sass
زمانی که به تازگی بحث متغیرهای سی اس اس مطرح شده بود خیلی از توسعه دهندگان تصورشان این بود که Sass یا امثال آن متغیر دارند پس نیازی به متغیرهای CSS نیست و اهمیتی ندارند.
اما باید بدانیم که این دو خیلی با هم متفاوت هستند و کارهای بسیاری را می توان از طریق متغیرهای CSS انجام داد که امکان آنها در پیش پردازنده ها وجود ندارد.
متغیرهای سی اس اس در زمان اجرا زنده هستند
در اینجا زنده بودن بدین معنا است که اگر بعد از استفاده از متغیر، مقدار آن را تغییر دهیم این تغییر بر روی ویژگی که از متغیر استفاده کرده است نیز اعمال می شود.
کد زیر را در نظر بگیرید:
.element {
--text-size: 30px;
font-size: var(--text-size); /* 50px */
--text-size: 50px;
}
همانطور که مشاهده می کنید بعد از اینکه متغیر مورد استفاده قرار گرفته به مقدار 50 تغییر کرده است اما با این وجود اندازه ویژگی font-size به مقدار 50 پیکسل به روز می شود.
اما اگر همچین کاری در پیش پردازنده ها انجام شود مقدار نهایی اندازه فونت 30 پیکسل خواهد بود این بدین دلیل است که متغیرهای سی اس اس در زمان اجرا زنده هستند.
متغیرهای سی اس اس نسبت به ساختار HTML آگاه هستند
فرض کنید می خواهیم اندازه فونت عنصر body را در صورتی که کلاس large-text به آن داده شود افزایش دهیم.
--font-size: 1em;
.large-text {
--font-size: 1.5em;
}
body {
font-size: var(--font-size);
}
حال اگر در زمان اجرا هر زمان این کلاس به عنصر body اضافه شود مقدار متغیر تغییر کرده و اندازه فونت این عنصر بیشتر می شود. این اتفاق به این دلیل می افتد که متغیرهای سی اس اس به DOM حساس هستند و با تغییر ساختار DOM بصورت پویا عمل می کنند.
متغیرهای CSS دقیقا مثل ویژگی های دیگر CSS عمل می کنند به همین دلیل به آنها Custom Property گفته می شود، از این رو کلمات کلیدی مثل inherit، initial و غیره برای این نوع از ویژگی ها نیز کاربرد دارند و عمل می کنند.
متغیرهای CSS پویا هستند، می توانیم آنها را در زمان اجرا تغییر دهیم، این متغیرها می توانند درون یک مدیا کویری تغییر کنند و یا با اضافه کردن یک کلاس به عنصر آنها را به روز کنیم.
آموزش های بیشتر در وبلاگ شیراز هک
