Пять возможностей Sass, которые можно заменить нативным CSS

Если вы пользуетесь Sass уже много лет, вы прекрасно понимаете его ценность: переменные, вложенность, функции работы с цветом и более чистый способ организации таблиц стилей. Но современный CSS незаметно догнал препроцессор. Целый ряд возможностей, которые раньше требовали препроцессора и этапа сборки, теперь поддерживаются нативно, имеют широкую поддержку и готовы к продакшену.

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

1. CSS Custom Properties заменяют переменные Sass

Sass:

$primary: #3498db;
.button { background: $primary; }

Нативный CSS:

:root { --primary: #3498db; }
.button { background: var(--primary); }

CSS custom properties широко поддерживаются современными браузерами и умеют то, чего не могут переменные Sass: они вычисляются во время выполнения, а не при компиляции. Это значит, что их можно обновлять из JavaScript, ограничивать областью видимости компонента или переопределять внутри media-запроса. Для тематизации и динамических интерфейсов они мощнее $variables.

Компромисс: переменные Sass всё ещё полезны, когда значение должно существовать только во время сборки, или когда вы передаёте значения в циклы и условия, которые CSS не может выразить нативно.

2. Нативная вложенность CSS заменяет вложенность Sass

Sass:

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  .card__title { font-size: 1.25rem; }
}

Нативный CSS:

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  & .card__title { font-size: 1.25rem; }
}

CSS nesting теперь широко поддерживается современными браузерами. Синтаксис почти идентичен Sass, но для ясности рекомендуется предварять вложенные селекторы типов или классов символом &. Нативная вложенность парсится браузером и использует поведение специфичности в стиле :is(), поэтому это не идеальный клон Sass, но для большинства задач уровня компонентов различия минимальны. Если вы используете Sass только ради вложенности — это самая простая в замене возможность.

3. color-mix() заменяет цветовые функции Sass

Sass:

$primary: #3498db;
.button { background: darken($primary, 10%); }

Нативный CSS:

:root { --primary: #3498db; }
.button { background: color-mix(in srgb, var(--primary) 80%, black); }

color-mix() широко поддерживается актуальными браузерами и позволяет получать более светлые, тёмные и смешанные варианты от одного базового цвета. Это не прямой эквивалент darken() или lighten() — те меняют светлоту в пространстве HSL, тогда как color-mix() смешивает два цвета — но для большинства практических случаев в дизайн-системе он покрывает ту же территорию. Для большего сходства с HSL-корректировками можно смешивать в цветовом пространстве hsl: color-mix(in hsl, var(--primary), black 10%).

4. @layer заменяет обходные приёмы со специфичностью

Sass-разработчики часто пишут замысловатые конструкции селекторов для управления специфичностью. CSS @layer теперь широко поддерживается современными браузерами и даёт явный контроль над порядком каскада без хаков со специфичностью:

@layer base, components, utilities;

@layer base { a { color: blue; } }
@layer utilities { .text-red { color: red; } }

Утилиты всегда выигрывают у базовых стилей — не из-за веса селектора, а из-за порядка слоёв. Это более чистое решение для управления каскадом, чем что-либо, что мог предложить Sass.

5. @property заменяет обходные приёмы для типизированных переменных

@property теперь поддерживается актуальными современными браузерами и позволяет регистрировать пользовательские свойства с указанием типа, начального значения и поведения наследования:

@property --hue {
  syntax: '<number>';
  initial-value: 220;
  inherits: false;
}

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

Что Sass по-прежнему делает лучше

В нативном CSS нет аналогов для @each, @for, @if или сложной логики @function. Если ваш Sass генерирует утилитарные классы, программно строит шкалы отступов или содержит условный вывод — оставайтесь на Sass. Также учтите, что @import в Sass объявлен устаревшим — вместо него используйте модульную систему @use и @forward.

Заключение

Для переменных, вложенности, манипуляций с цветом, контроля каскада и типизированных свойств современного CSS теперь достаточно, чтобы покрыть многие повседневные задачи стилизации. Проведите аудит того, ради чего вы реально используете Sass. Возможно, вы обнаружите, что этап сборки решает меньше проблем, чем раньше. Sass по-прежнему оправдывает своё место для программной логики, но в повседневных задачах стилизации нативный CSS уже догнал его.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..