متغییر ها (var) در CSS

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

دو مدل متغییر داریم. یکی گلوبال هستند و در سراسر پروژه بهشون دسترسی داریم، .و یک نوع دیگر لوکال هستند که در داخل اسکوپ {} یک پراپرتی مشخصی میشه ازش استفاده کرد. مدل گلوبال متغییر بشدت کاربردی هست.

در ادامه با نحوه تعریف متغییر گلوبال آشنا می شوید:

:root {
  --primary-color: #3949AB;
  --secounly-color: #3658AB;
  --bodyFontFamily: dana;
  /* به حروف بزرگ و کوچک حساس هست */
}
p {
  font-family: var(--bodyFontFamily);
}
div.main {
  background-color: var(--primary-color);
}