آشنایی با root و var در CSS

در زبان طراحی css می‌توانید بسیار زیباتر و ساده‌تر کد بزنید و پروژه خودتان را استانداردسازی کنید . البته که تمامی فریمورک‌های حال حاضر مثل بوت استرپ یا tailwindCss همگی یک الگوی استاندارد در اختیار شما قرار خواهند داد . برای مثال در دوره آموزش بوت استرپ خدمت شما عزیزان بخوبی کاربرد root و var را نمایش دادیم و شاهد هستید که بوت استرپ بخوبی سیستم root و var را عملی کرده است . اما این دو عنصر ، چه تاثیری بروی پروژه شما در طراحی با سی اس اس دارند ؟

آشنایی با root

کلمه root درکل به معنی ریشه است و در برنامه نویسی root به شاخه اصلی برنامه گفته می‌شود . در زبان CSS نیز کلمه root به همین معنی است و شما می‌توانید در ریشه پروژه مواردی را جهت استفاده در کل پروژه تعریف کنید . درحقیقت به نوعی چیزی شبیه به متغیرهای برنامه نویسی اما در سطحی بسیار پایین‌تر !

برای اینکه قسمت root را در پروژه خودتان ایجاد کنید باید در ابتدای کدهای پروژه خود باشید . به عبارتی این بخش جزء دستورات مادر است و باید در ابتدای پروژه درج شود . پس باید به شکل زیر عمل کرد :

:root {
}

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

:root {
	--red:#ae5656;
	--dark:#323234;
}

در این بخش اکنون دو اسم به دلخواه و بصورت red- – و dark- – ساختیم . در این بخش می‌توانیم با استفاده از – یا – – یا – – – اسامی را نامگذاری یا قابل شناسایی کنیم . مثلا red- -bs- – که نشان دهد این رنگ قرمز در سیستم bs تعریف شده است . نمونه‌ای از این نامگذاری‌ها را از فریمورک بوت استرپ برای شما در زیر قرار داده‌ایم :

:root{
	--bs-blue:#0d6efd;
	--bs-indigo:#6610f2;
	--bs-purple:#6f42c1;
	--bs-pink:#d63384;
	--bs-font-sans-serif:system-ui;
}

این نامگذاری و تنظیم مقادیر برای بوت استرپ در نسخه 5 است . اما این نامگذاری برای چیست و چرا باید از این استفاده کنیم ؟

این سیستم مسبب استاندارد سازی پروژه می‌شود و در هر بخش از پروژه که شما نیاز به تغییر یکی از آیتم‌های تعریف شده در بخش root داشته باشید ، کافیست تا همان مقدار را در بخش root تغییر دهید که در کل بخش‌های پروژه شما اعمال شود . اکنون از این مقادیر و اسامی باید چگونه استفده کنیم ؟

آشنایی با var در CSS

بعد از اینکه مقادیر دلخواه خود را داخل root تعریف کردید ، زمان استفاده از آنها فرا رسیده است . تصور کنید که قصد داریم تا از مقدار – -bs-blue استفاده کنیم تا این رنگ در بخش دلخواه پروژه ما اعمال شود . پس باید بصورت زیر عمل کنیم :

p { 
	color:var(--bs-blue); 
}

اکنون برای تمامی تگ های p موجود در سایت ، مشخص کردیم که صفت color توسط یک تابع یعنی var مقدار دهی شود . اکنون داخل var باید از مقادیری که داخل root استفاده شده است تنظیم کنیم پس ، یکی از اسامی داخل root با مقداری که مدنظر داریم را استفاده می‌کنیم .

به همین سادگی می‌توانیم در تمامی قسمت‌هایی که به color با یک کد رنگ مشخص نیاز داریم از var استفاده کنیم . اکنون اگر در تمامیت پروژه نیاز به تغییر مقدار داخل – -bs-blue داشته باشیم ، بسادگی فقط با تغییر مقدار همین اسم در داخل بخش root ، در کل پروژه این رنگ با این کد ، تغییر خواهد کرد .

نکات مهمی که باید به آنها توجه کنید

رمانی که قصد داریم تا سیستم‌هایی را جهت شخصی سازی پوسته در قسمت رنگ قالب ایجاد کنیم ، این تنظیمات بسیار کارآمد هستند و می‌توانید با تعریف درست و اصولی این مقادیر با اسامی صحیح ، پروژه خود را بسیار حرفه‌ای و سبک کنید .

یکی از نکات مهم در این قسمت اینجاست که هرگز نباید در تعریف اسامی و مقادیر در بخش root زیاده روی کنید و از این بخش باید با دقت استفاده شود . فریمورکی همچون بوت استرپ نیز در این قسمت با تعریف مقادیر اصلی ، پروژه خود را استاندارسازی کرده است .

برای پروژه‌های بسیار کوچک استفاده از این بخش توصیه نمی‌شود اما اگر استفاده کنید نیز مانعی وجود ندارد . حتما توجه داشته باشید که بخوبی و بصورت هوشمندانه با تمرینات متوالی ، بصورت یک متخصص از ویژگی root و var استفاده کنید .