CSS Variables и современный CSS без препроцессоров

Современный CSS давно вышел за рамки «простого оформления». Сегодня многие задачи, которые раньше решались через Sass или Less, можно закрыть нативно — с помощью CSS Variables, calc(), clamp(), cascade layers и других возможностей браузера.

Что такое CSS Variables

CSS-переменные, или custom properties, позволяют хранить значения и переиспользовать их в стилях:

:root {
  --color-primary: #2563eb;
  --space-md: 16px;
  --radius: 12px;
}

Дальше они подключаются через var():

.button {
  background: var(--color-primary);
  padding: var(--space-md);
  border-radius: var(--radius);
}

Это удобно для:

• единой дизайн-системы
• быстрой смены темы
• снижения количества дублирующегося кода
• упрощения поддержки проекта

Почему можно обходиться без препроцессоров

Раньше препроцессоры были нужны для переменных, вложенности и математических операций. Сейчас многое есть в самом CSS:

• Переменные — через --name и var()
• Адаптивные размеры — через min(), max(), clamp()
• Вычисления — через calc()
• Изоляция каскада — через @layer
• Локальная логика темизации — через области видимости переменных

Пример адаптивного текста:

.title {
  font-size: clamp(24px, 4vw, 40px);
}

Такой подход уменьшает количество медиазапросов и делает верстку гибче 📱

Главное преимущество — динамичность

В отличие от переменных Sass, CSS Variables работают в рантайме. Их можно менять прямо в браузере, например для темной темы:

:root {
  --bg: #ffffff;
  --text: #111111;
}

[data-theme="dark"] {
  --bg: #111111;
  --text: #f5f5f5;
}

body {
  background: var(--bg);
  color: var(--text);
}

Это особенно полезно для:

• dark mode
• брендирования интерфейсов
• настройки компонентов
• A/B-тестов

Где препроцессоры всё ещё могут пригодиться

Полностью списывать Sass рано. Он полезен, если нужны:

• сложные миксины
• циклы и генерация классов
• разбиение архитектуры в старых проектах
• поддержка легаси-кода

Но для большинства новых интерфейсов нативный CSS уже покрывает базовые и средние задачи без лишнего слоя сборки.

Практический вывод

Если проект современный, не перегружен легаси и не требует сложной генерации стилей, связка CSS Variables + современные возможности CSS часто оказывается проще, быстрее и прозрачнее, чем использование препроцессоров 🚀

Нативный CSS сегодня — это уже не компромисс, а полноценный инструмент для масштабируемой фронтенд-разработки.

👀 Ниже стоит посмотреть подборку каналов про IT — там много полезного по фронтенду, архитектуре и современным инструментам разработки.

🗣 Подборки каналов
🧠 Каталог ботов и приложений
🗺 Навигация