Sass — Примеры

Пример 1 — Вложенность, повторяющая разметку

Вложенность ниже повторяет DOM на четыре уровня вглубь. Небольшое изменение дизайна требует ещё одного уровня для переопределения. Скажите, что каждый уровень делает со скомпилированным селектором, и выровняйте вложенность до устойчивого предела.

.card {
  .card__header {
    .card__title {
      .card__badge {
        color: teal;
      }
    }
  }
}

Решение

.card {
  padding: 1rem;

  &.is-selected { border-color: teal; }
}

.card__title { font-size: 1.125rem; }
.card__badge { color: teal; }

Вложенность Sass — удобство для автора, а не область видимости: каждый уровень конкатенируется в скомпилированный селектор, поэтому четыре уровня дают селектор со специфичностью четырёх классов, которую следующему разработчику придётся перебивать пятью. Вложить один уровень и использовать & для состояния или модификатора — значит оставить скомпилированный вывод плоским и переопределяемым и не дать форме таблицы стилей зависеть от формы разметки. Имена классов уже говорят, какому элементу они принадлежат, так что вложенность не добавляла информации — только специфичность, и та же сдержанность применима к нативной вложенности CSS.

Пример 2 — Переменная Sass там, где значение должно меняться во время выполнения

Фирменный цвет — переменная Sass, поэтому второй бренд требует второй таблицы стилей. Скажите, почему переменная не справляется с этой задачей, и перенесите значение в пользовательское свойство.

$brand: #0f766e;

.button {
  background: $brand;
  border-color: $brand;
}

// чтобы перетемизировать раздел, требовалась целая вторая компиляция

Решение

:root { --brand: #0f766e; }

.button {
  background: var(--brand);
  border-color: var(--brand);
}

.brand-partner { --brand: #1d4ed8; }

Переменная Sass подставляется во время сборки, поэтому значение закрепляется в скомпилированном CSS и каждая вариация требует отдельной сборки, тогда как пользовательское свойство существует во время выполнения и наследуется: задайте его на обёртке — и всё внутри перетемизируется без второй компиляции и без селектора на каждый компонент. Именно эту часть Sass нативный CSS сделал избыточной, и ради неё стоит провести ревизию файла: переменные, которые используются для всего, что меняется во время выполнения, должны стать пользовательскими свойствами, а Sass сохраняет работу, которую CSS всё ещё не умеет делать, — циклы по карте, которые порождают систематический набор правил, и функции, которые вычисляют значения. Шаг сборки стоит оставлять только ради того, что он действительно несёт.