متغیرها در css

سلام دوستان. من در این مقاله متغیرهای css رو به صورت مختصر و مفید برای شما آموزش میدم. استفاده از متغیرهای css در طراحی سایت خیلی کاربردیه و همچنین کار شما رو سریع‌تر میکنه. پیشنهاد میکنم حتما ازش استفاده کنید.

ایجاد متغیر در css

برای ایجاد متغیر کافی است که ابتدا -- را قرار دهیم و سپس نام متغیر را بنویسیم(متغیرها هم مانند تمامی ویژگی‌های css باید داخل یک سلکتور نوشته شوند). به صورت زیر.

body {
     --titr-color: #ffb700;
}

ما در این کد یک متغیر به نام titr-color-- ایجاد کردیم و یک رنگ سبز به آن دادیم. حالا میخواهیم از این متغیر استفاده کنیم.

استفاده از متغیر در css

برای استفاده از متغیری که ایجاد کردیم کافی است با استفاده از تابع ()var این کار رو به راحتی انجام بدیم. کد زیر رو ببینید.

h2 {
     color: var(--titr-color);
}

همانطور که در کد بالا میبینید ما رنگ تگ‌های h2 رو با استفاده از تابع ()var به رنگ titr-color-- تبدیل کردیم و الان همه تگ‌های h2 صفحه ما سبز شدند.

محدوده متغیر در css

متغیرهای css هم مانند سایر زبان‌های برنامه نویسی محدوده خاص دارند. این محدوده بر اساس ساختار html می‌باشد. مثلا ما در کد زیر یک متغیر ایجاد کرده‌ایم که فقط داخل زیرمجموعه‎‌های parent. قابل استفاده است.

.parent {
     --paragraph-color: #373737;
}
.parent p {
     color: var(--paragraph-color);
}

در کد بالا تمام تگ های p که زیرمجوعه parent. هستند رنگشان به رنگ متغیر paragraph-color-- تغییر کرده است. ما نمیتوانیم از متغیر paragraph-color-- در body استفاده کنیم، چون که body زیرمجوعه parent. نیست.

نکاتی که باید بدانید:

• متغیرهای css فقط برای رنگ استفاده نمی‌شوند و شما میتوانید به متغیرها سایز و... هم بدهید.
• اگر مقدار متغیری را در css تغییر دهید، این تغییر بر روی ویژگی‌هایی که از آن متغیر استفاده کردند اعمال می‌شود.
• متغیرهای css با متغیرهای sass فرق دارند.
  

بقیه مقاله‌های من:

روش های یادگیری برنامه نویسی

تفاوت var و let و const در جاوا اسکریپت

تبدیل اعداد انگلیسی به فارسی در جاوا اسکریپت