Var css как использовать

var (или переменная) может использоваться в CSS для хранения значений и использования их в разных свойствах.

Для определения переменной в CSS используется синтаксис с двумя дефисами и оборачивания имени переменной в двойные или одинарные кавычки:

--main-color: #FFA500;
--font-size: 16px;

После определения переменных, их можно использовать в свойствах CSS с помощью функции var().

.my-element {
  color: var(--main-color);
  font-size: var(--font-size);
  background-color: var(--main-color, #000000);                /* можно использовать значение по умолчанию */
  border: 1px solid var(--border-color, var(--main-color));    /* значения переменных можно комбинировать для определения значений */
}

Использование переменных позволяет быстро и легко изменять значения свойств во всем документе, просто изменив значение переменной в одном месте.

Еще одно удобство использования переменных в CSS заключается в том, что они могут быть определены в разных медиавыражениях и использоваться в разных свойствах, в зависимости от размера экрана. Это облегчает создание адаптивных интерфейсов.

:root {
  --main-color: #FFA500;
  --font-size: 16px;
}

@media (max-width: 799px) {
  :root {
    --main-color: #00FF00;
    --font-size: 14px;
  }
}

.my-element {
  color: var(--main-color);
  font-size: var(--font-size);
  /* другие свойства */
}

В этом примере, при ширине экрана меньше 800 пикселей, значения переменных будут изменены на другие, что позволяет создать более оптимальные стили для мобильных устройств.

Надеюсь, эта информация была вам полезна!