Sass: что реально нужно, а что вредно

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

С тех пор CSS сильно вырос. Переменные есть с 2016 года, вложенность — с 2023, математика через calc() была всегда. Половина причин брать препроцессор исчезла.

Вопрос перестал быть «использовать ли Sass». Он стал «что именно из Sass мне ещё нужно».

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

Переменная Sass существует только во время сборки. В готовом файле её нет — там подставлено значение. Поменять её из браузера, из скрипта или медиазапросом невозможно.

Переменная CSS живёт в браузере. Наследуется, переопределяется в любом селекторе, меняется скриптом и читается через getComputedStyle.

Вложенность экономит буквы и делает структуру наглядной. Расплата — специфичность, которая растёт незаметно.

Каждый уровень добавляет часть к селектору. Три уровня — и получается вес, который потом нечем перебить, кроме ещё более длинного селектора.

.page {
  .sidebar {
    .card {
      .title { font-size: 18px; }
    }
  }
}

/* На выходе: .page .sidebar .card .title — вес 0-4-0 */

.card {
  padding: 16px;

  &__title { font-size: 18px; }
  &:hover { box-shadow: var(--shadow-2); }
}

/* На выходе: .card__title — вес 0-1-0 */

Миксин выглядит как функция, но ведёт себя как шаблон: при каждом вызове его содержимое вставляется целиком.

Десять вызовов миксина из восьми свойств — это восемьдесят строк в готовом файле. На глаз этого не видно: исходник-то короткий.

1/* Плохо: миксин копирует одно и то же в каждый вызов */2@mixin card-base {3  padding: 16px;4  background: #fff;5  border-radius: 14px;6  box-shadow: 0 2px 8px rgb(20 24 48 / .08);7}89.product { @include card-base; }10.article { @include card-base; }11.promo   { @include card-base; }1213/* Лучше: общий класс в разметке, ноль дублей в CSS */14.card {15  padding: 16px;16  background: #fff;17  border-radius: 14px;18  box-shadow: 0 2px 8px rgb(20 24 48 / .08);19}

Миксин оправдан там, где повторяется логика, а не набор свойств: сложный медиазапрос, обёртка над градиентом с параметрами, генерация нескольких правил разом.

• Циклы и списки. Сгенерировать двадцать классов отступов по шкале в чистом CSS нечем. Это главная причина, по которой Sass до сих пор в проектах.
• Разбиение на файлы через @use. В CSS есть @import, но он делает лишний сетевой запрос и работает медленнее. Sass склеивает файлы при сборке.
• Функции с вычислениями. Округление, работа со списками, генерация имён — в CSS этого нет.
• Общий код для нескольких проектов. Библиотека миксинов, подключаемая в несколько сайтов сразу.

1        $spaces: (0: 0, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 6: 24px, 8: 32px);23        @each $name, $value in $spaces {4          .p-#{$name} { padding: $value; }5          .m-#{$name} { margin: $value; }6          .gap-#{$name} { gap: $value; }7        }89        /* Двадцать одно правило из семи строк исходника.10           В чистом CSS их пришлось бы написать руками */

Старый @import в Sass объявлен устаревшим. Он подключал файлы в общее пространство имён: две переменные с одинаковым именем из разных файлов молча перетирали друг друга.

@use подключает файл под своим именем — становится видно, откуда что взялось.

1        /* main.scss */2        @use "tokens";3        @use "mixins" as m;45        .card {6          padding: tokens.$space-4;7          @include m.card-shadow;8        }910        /* Видно, что переменная из tokens, а миксин из mixins.11           При старом @import это было бы неотличимо */

• Ради вложенности. Она есть в чистом CSS и работает так же. Это больше не аргумент.
• Ради переменных. Переменные CSS мощнее: они живут в браузере. Sass-переменные — шаг назад для всего, что связано с темами.
• На маленьком проекте. Сборка добавляет шаг между правкой и результатом. На лендинге в пятьсот строк это чистая потеря времени.
• Когда команда не знает Sass. Обычный CSS читают все. Препроцессор — это ещё один язык, который придётся объяснять каждому новому человеку.

<article class="product">  <h3>Раф</h3>  <p>240 ₽</p></article>​<article class="promo">  <h3>Акция</h3>  <p>Второй кофе бесплатно</p></article>​<article class="note">  <h3>Заметка</h3>  <p>Работаем до 22:00</p></article>

.product {  padding: 16px;  background: #ffffff;  border-radius: 14px;  box-shadow: 0 2px 8px rgb(20 24 48 / .08);  margin-bottom: 12px;}​.promo {  padding: 16px;  background: #ffffff;  border-radius: 14px;  box-shadow: 0 2px 8px rgb(20 24 48 / .08);  margin-bottom: 12px;  border-left: 3px solid #6544e0;}​.note {  padding: 16px;  background: #ffffff;  border-radius: 14px;  box-shadow: 0 2px 8px rgb(20 24 48 / .08);  margin-bottom: 12px;  color: #5b6070;}​h3 { margin: 0 0 6px; font-size: 16px; }p { margin: 0; font-size: 14px; }

1<article class="card product">2  <h3>Раф</h3>3  <p>240 ₽</p>4</article>56<article class="card promo">7  <h3>Акция</h3>8  <p>Второй кофе бесплатно</p>9</article>1011<article class="card note">12  <h3>Заметка</h3>13  <p>Работаем до 22:00</p>14</article>

1:root {2  --color-surface: #ffffff;3  --color-accent: #6544e0;4  --color-muted: #5b6070;5  --radius-md: 14px;6  --space-4: 16px;7}89/* Общее — один раз */10.card {11  padding: var(--space-4);12  background: var(--color-surface);13  border-radius: var(--radius-md);14  box-shadow: 0 2px 8px rgb(20 24 48 / .08);15  margin-bottom: 12px;16}1718/* Отличия — только они */19.promo { border-left: 3px solid var(--color-accent); }20.note { color: var(--color-muted); }2122h3 { margin: 0 0 6px; font-size: 16px; }23p { margin: 0; font-size: 14px; }