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

در جلسه قبل مقدماتی رو در مورد متغیرهای CSS بیان کردیم و در این جلسه میخوایم این موضوع رو ادامه بدیم. با استفاده از متغیرها میتونین از انجام کارهای تکراری پرهیز کنید و میتونین برای مواقع همچون تغییر قالب و Theme از اون استفاده کنید و به سرعت رنگ کل سایت و المنتها رو عوض کنید و یا اندازه فونت رو کم و زیاد کنید.

تعریف و استفاده از متغیرهای CSS

متغیرها باید درون یک Selector تعریف بشوند و این Selector دامنه یا Scope اونا رو مشخص میکنه. برای اینکه یک متغیر رو بصورت سراسری تعریف کنید، باید متغیر رو درون انتخابگر :root قرار بدین. قبل از هر متغیری که بخواید تعریف کنید باید -- قرار بدین. متغیرها به کوچک یا بزرگ بودن حروف حساس هستن و در نتیجه دو متغیر --main-color و --Main-Color یکی نیستن و دو متغیر جداگانه و مستقل هستن. تعریف متغیرها قواعد خیلی خاصی نداره و به سادگی میتونین از اونا استفاده کنید. برای نامگذاری بهتر هست که کلمات رو با استفاده از - یا خط تیره، از هم جدا کنید تا خوانایی کدها بالاتر برود. کد زیر رو در نظر بگیرید:

با استفاده از کد بالا یک متغیر بنام --main-color رو در دامنه سراسری یا Global به وجود آوردیم و مقدار #06c رو برای اون قرار دادیم.

برای اینکه از این متغیر استفاده کنید و به اون دسترسی داشته باشید، باید از تابع var() استفاده کنید. نام متغیری که قصد دارید به اون دسترسی داشته باشید رو درون این تابع قرار بدین و این تابع مقداری که به اون متغیر نسبت دادین رو به شما تحویل میده. چون ما متغیر بالا رو بصورت سراسری تعریف کردیم، پس حالا میتونیم از اون در هر جایی که بخوایم استفاده کنیم. کد زیر رو در نظر بگیرید:

میبینید که میخوایم رنگ متن h1 درون header رو مشخص کنیم. برای اینکار از تابع var استفاده شده و نام متغیر مورد نظر درون اون قرار گرفته. با اینکار رنگ متن مورد نظر برابر با مقدار متغیر و همون #06c تعیین میشه.

متغیرها و قواعد آبشاری

متغیرهای CSS هم مانند دیگر موارد CSS از قواعد آبشاری پیروی میکنن و موارد مربوط به اولویت و به ارث رسیدن در اونا انجام میشه. پس شما میتونین متغیرهای با نام یکسان رو در سطح های مختلف تعریف کنید و هر المنت با توجه با اولویت، مقدار خودش رو دریافت میکنه. کد زیر رو در نظر بگیرید:

حالا کد CSS زیر رو برای اون قرار میدیم:

همونطور که قبلا هم بیان شد، متغیرها درون هر Selector که تعریف بشن، دامنه همون selector رو خواهند داشت و فراتر از اون نخواهند رفت. میبینید که متغیر --color رو برای سه سطح مختلف :root و div و .myClass تعریف کردیم و مقادیر مختلفی رو برای هر کدام قرار دادیم. در خط 4 هم با استفاده از تابع var، این متغیر رو برای ویژگی color مربوط به همه المنتها یا * قرار دادیم. بنظر شما هر المنت چه رنگی خواهد شد؟

مقدار پیش فرض برای متغیر color، رنگی آبی هست، چون اون رو درون root تعریف کردیم. هر گاه به هر المنتی برسیم و مقدار دیگه ای برای اون در نظر گرفته شده باشه، از مقدار پیش فرض تعریف شده در root صرف نظر میشه و مقدار فعلی برای اون قرار میگیره. این رفتار به این دلیل هست که اون selector خاص تر هست و اولویت بیشتری دارد. پس در بالا چون برای تگ پاراگراف بصورت خاص رنگی رو مشخص نکردیم، رنگ متنش بصورت پیش فرض یا همون آبی در میاد. رنگ متن درون div هم سبز رنگ میشه. المنت div که در خط 3 قرار گرفته، یک کلاس بنام myClass داره. چون برای این کلاس بصورت جداگانه یک متغیر تعریف شده، پس این selector اولویت بیشتری دارد و رنگ متن این div قرمز رنگ خواهد شد. همونطور که میبینید یک p هم درون این div قرار داده شده و این p هم رنگ قرمز رو از parent خودش به ارث میبره. پس در نهایت خروجی در مرورگر بصورت زیر میشه:

به همین راحتی.

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

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

موفق باشید

یا علی

Source