آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 42) : متغیرهای CSS - قسمت 1

همونطور که اطلاع دارید در جلسه گذشته در مورد ویژگی های overflow-wrap و word-break و word-wrap توضیحاتی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه و جلسه های بعد توضیحاتی رو در مورد CSS Variables یا متغیرهای CSS میدیم که میتونه خیلی مفید واقع بشه. ما در این مطلب از این لینک به عنوان مرجع استفاده میکنیم.

همونطور که میدونین بیشتر افزونه ها و کتابخانه های معروف به این دلیل به وجود اومدن که کمبود یا نقصی در اون زبان وجود داشته و ما میتونیم از اونا استفاده کنیم تا اون نقص و کمبود رو جبران کنیم. مرورگرها خودشون رو توسعه میدن و کاری میکنن که دیگه به این ابزارها نیازی نباشه و بتونیم با اون زبان، کاری که کاربر قصد داره رو انجام بده. مثلا Sass یا Less زبانهایی هستن که بخاطر کمبودهایی که در خود CSS وجود داشت، به وجود اومدن. W3C همیشه در حال توسعه CSS هست و مرورگرها نیز وظیفه دارند که آخرین استانداردها رو پیاده سازی کنند. یکی از ویژگی هایی که به CSS اضافه شده و کم کم همه مرورگرها از اون پشتیبانی میکنن، CSS Variables یا متغیرهای CSS هست که با استفاده از اون، نیاز ما به بخشی از زبانهایی مثل Sass و Less کمتر میشه.

با استفاده از این ویژگی شما میتونین مستقیما درون کدهای CSS خودتون، متغیرهایی رو تعریف کنید و بعد از اون در همه جا به این متغیرها دسترسی خواهید داشت. حتی میتونین با استفاده از Javascript به این متغیرها دسترسی داشته باشید و اونا رو دست کاری یا manipulation کنید. این متغیرها نسبت به متغیرهایی که در Preprocessor ها همانند Sass مورد استفاده قرار میگیره، تفاوتها و مزایایی دارند که در ادامه اونا رو بهتون توضیح میدیم. در حال حاضر مرورگرهای Safari و Chrome و Firefox از CSS Variable یا ویژگی های سفارشی CSS پشتیبانی میکنن:

همونطور که میبینید مثل همیشه Internet Explorer اذیت میکنه ولی از اونجا که استفاده از اون خیلی کم شده، برای ما مشکل ساز نخواهد بود. مرورگر Edge هم تقریبا این مورد رو اضافه کرده و باگهایی داره که در آینده ای نزدیک برطرف خواهند شد. هر چه جلوتر بریم، پشتیبانی مرورگرها از این ویژگی بهتر و بیشتر خواهد شد.

نحوه استفاده ساده:

استفاده از متغیرهای CSS یک فرآیند دو مرحله ای ساده هست:

1. درون selector مورد نظر، متغیر رو با فرمت --myvariable قرار بدین. کاربرد selector در اینجا این هست که دامنه متغیر رو مشخص کنه و اینکه چه مواردی میتونن از این متغیرها استفاده کنند. اگر متغیر رو درون selector با نام :root تعریف کنیم، در همه جا میتونیم به این متغیر دسترسی داشته باشیم.
2. هر جا بخوایم به متغیر مورد نظر دسترسی داشته باشیم، میتونیم از var(--myvariable) استفاده کنیم. میبینید که متد var رو قرار دادیم و درون اون نام متغیر  که در بالا تعریف کردیم رو قرار دادیم. با اینکار مقدار متغیر به ما برگشت داده میشه.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source