💎 وریبل‌ها در CSS 💎

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

نحوه تعریف و استفاده از وریبل‌ها 🚀

➊ وریبل‌ها در CSS با استفاده از -- تعریف می‌شوند و برای دسترسی به آن‌ها از تابع var() استفاده می‌کنیم

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

توی کد بالا وریبل های خودمون رو در شبه کلاس :root تعریف کردیم

➋ حالا برای استفاده از وریبل‌ها در بخش‌های مختلف CSS، کافی است آن‌ها را با تابع var که بالاتر گفتیم فراخوانی کنیم

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--secondary-color);
  font-size: var(--font-size);
}

تو کد بالا رنگ و اندازه فونت عناصر body و button رو با وریبل‌های CSS مقدار دهی کردیم.

#️⃣ #css #css_variables

🚀 @coolycode