Ответ
CSS-переменные (Custom Properties) — это пользовательские свойства, которые позволяют хранить значения для повторного использования в CSS. Они объявляются с префиксом -- и доступны через функцию var().
Преимущества:
- Упрощают поддержку кода (изменение в одном месте).
- Поддерживают каскадирование и наследование.
- Могут изменяться динамически через JavaScript.
Пример:
:root {
--primary-color: #3498db;
}
.button {
background-color: var(--primary-color);
}Изменение через JS:
document.documentElement.style.setProperty('--primary-color', '#e74c3c');Ответ 18+ 🔞
А, слушай, про CSS-переменные! Ну это ж просто пиздец как удобно, я тебе щас объясню, почему все с ума сходят.
Раньше, блядь, был пиздец: цвет основной прописал в двадцати местах, а потом заказчик приходит — «ой, сделайте посимпатичнее, этот синий — говно». И ты, сука, полдня ползаешь по всем файлам, ищешь, где этот синий упоминался, а потом ещё и накосячить можно, пропустить где-то. Ужас, блядь, терпения ноль ебать!
А теперь — красота, ёпта! Заводишь себе такую штуку, как сейф для значений. Называется она — кастомное свойство. Пишешь в самом верху, в :root (это типа глобальная шапка для всего документа):
:root {
--main-color: #3498db; /* Вот твой фирменный синий */
--default-padding: 20px; /* И отступ любимый */
}Видишь, два дефиса и любое название. Теперь, где тебе этот цвет нужен, не пишешь хардкодом, а вызываешь через var(), как функцию:
.button {
background-color: var(--main-color); /* Подставится #3498db */
padding: var(--default-padding);
}
.header {
border-bottom: 2px solid var(--main-color); /* И тут тот же синий! */
}И вся магия в чём? Захотел поменять цвет на красный — один раз, сука, в :root поправил, и везде, где var(--main-color) стоит, автоматом всё обновится! Ебушки-воробушки, удобнее не придумаешь!
Но и это ещё не всё, хитрая жопа! Их же через JavaScript можно менять на лету! Представь, у тебя тёмная тема на сайте. Раньше бы голову сломать, а сейчас — раз плюнуть:
// Меняем глобальную переменную CSS на тёмно-серый
document.documentElement.style.setProperty('--main-bg-color', '#2c3e50');И всё, блядь! Всё, что было привязано к --main-bg-color, мгновенно перекрасилось. Никаких лишних классов, никакого геморроя. Чистая магия, я тебе говорю!
Короче, если до сих пор не используешь — ты, прости, просто мудак, блядь. Это ж базовый скилл, который жизнь в разы упрощает. В рот меня чих-пых, как же я без них раньше жил!