یاد بگیر چطور توی css از متغیرها استفاده کنی :)

توی این پست در مورد چرایی استفاده از متغیرها و نحوه استفاده از اونها آشنا میشید. همچنین نحوه تغییر مقادیر این متغیرها با جاوااسکریپت رو هم یاد میگیرید.

چرا باید یاد بگیریم؟

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

تعریف کردن یک متغیر

اول از همه باید قلمرو استفاده از این متغیرها رو مشخص کنیم. اگر میخواید به صورت global دردسترس باشه، کافیه اون رو توی المنت root (که معمولا تگ html هستش) قرار بدید.

برای تعریف متغیر، مقل پراپرتی های css کافیه نام گذاری کنید و بعد مقدارش رو بدید. فقط یک نکته ای هم رو هم بگم که قبل از اسم پراپرتی، باید دو تا دش (-) بزارید.

نحوه استفاده

برای استفاده از متغیرهایی که تعریف کردیم، کافیه از یک تابع به نام var استفاده کنیم. به این شکله که تابع var رو فراخوانی میکنیم و بعد متغیر رو به عنوان آرگومان بهش میدیم.

متغیرهای لوکال

زمانی که میدونیم این متغیر فقط توی همین محدوده نیازه که استفاده بشه و جاهای دیگه بهش احتیاج نداریم، از متغیرهای لوکال یا محلی استفاده میکنیم.

برای مثال، ما یک رنگ داریم که فقط توی کلاس alert استفاده میشه. برای همین ما میایم توی کلاس alert تعریف میکنیم و بعد از این متغیر برای children یا فرزندهای این المنت استفاده میکنیم.

واکنش گرایی با متغیرها

یکی دیگه از مهم ترین مزایای استفاده از متغیرها در css دسترسی به DOM هستش. این مورد توی Sass یا Less نیست، چون وقتی کامپایل میکنیم، به کد css معمولی تبدیل میشن.

پس این خیلی میتونه بهمون توی responsive کردن وبسایت کمک کنه، چون توی سایز های مختلف میتونیم مقدار متغیرها رو عوض کنیم و این توی کل وبسایت عوض میشه.