CSS переменные vs SCSS переменные - когда какие?Сегодня покажу вам, как я выбираю между
CSS custom properties (
--var) и
SCSS-переменными (
$var). Оба инструмента решают похожую задачу, но работают в разное время и по-разному влияют на проект.
1) Как они живут
-
SCSS $var - подставляются
на этапе сборки. В итоговом CSS переменных уже нет. Быстро, просто, но
не изменить в рантайме.
-
CSS --var - существуют
в браузере, участвуют в
каскаде, могут меняться
через медиа- и контейнер-запросы, селекторы, JS. Идеальны для тем, адаптивов и динамики.
2) Примеры на пальцах
Тема/бренд + тёмный режим (CSS)
:root { --primary: #4f46e5; }
.button { background: var(--primary); }
/* Тёмная тема меняет только значение */
.dark { --primary: #7c3aed; }
Адаптив без дублирования (CSS)
:root { --gap: 8px; }
@media (min-width: 768px) {
:root { --gap: 16px; }
}
.grid { gap: var(--gap); }
Живая смена из JS (CSS)
document.documentElement.style.setProperty('--primary', '#22c55e');
Дизайн-токены, генерация классов (SCSS)
$colors: (
primary: #4f46e5,
success: #16a34a,
danger: #dc2626
);
@function color($name) { @return map-get($colors, $name); }
@each $name, $val in $colors {
.text-#{$name} { color: $val; }
}
.btn--primary { background: color(primary); }
Флюидная типографика (CSS)
:root { --fs-h1: clamp(1.75rem, 1rem + 3vw, 3rem); }
h1 { font-size: var(--fs-h1); }
3) Когда что выбрать
-
Берите SCSS $var, если:
- значения никогда не меняются в браузере;
- нужно удобно
генерировать кучу классов/правил из карт и циклов;
- вы хотите ранний фейл при ошибке (компилятор сразу ругнётся).
-
Берите CSS --var, если:
- требуется
темизация, переключатели, A/B, кастомизация у пользователя;
- значения зависят от
медиа/контейнер-запросов;
- хотите использовать
calc(),
clamp() и
каскад как фичу.
4) Частые ошибки
- «Почему
$primary не меняется в тёмной теме?» - потому что это SCSS и оно уже подставлено при сборке.
-
var(--x) без фоллбэка:
color: var(--link, #2563eb); /* ← безопаснее */
- Переопределение не там, где действует селектор. Помните:
CSS-переменные каскадируют — задавайте их на нужной “высоте” (
:root,
.dark, контейнер).
5) Любимый гибрид-подход (очень практично)
- Храню
источник правды в SCSS-карте → генерю из неё
CSS-переменные в
:root. Так у меня есть и удобство сборки, и сила рантайма.
$tokens: (
primary: #4f46e5,
spacing: 8px,
radius: 12px
);
:root {
@each $k, $v in $tokens {
--#{$k}: #{$v};
}
}
/* дальше в CSS / компоненте */
.card {
padding: var(--spacing);
border-radius: var(--radius);
background: var(--primary);
}
.dark { --primary: #7c3aed; }
6) Мини-практика (сделайте прямо сейчас)
1. Возьмите ваш
$colors в SCSS и сгенерируйте из него
:root { --color-name: value }.
2. Переключите тему добавлением класса
.dark на
<html> и переопределите 2–3 ключевых токена.
3. Переведите один медиазависимый размер (например, `gap`) на CSS-переменную как в примере выше.
7) Чеклист напоследок
- Нужна динамика/тема/адаптив →
CSS --var.
- Нужна генерация/сборка/статичность →
SCSS $var.
- Большой проект? Делайте
гибрид: токены →
:root через SCSS.
👉
@frontend_sovet 
FR 
