Переменные, вложенность, color-mix: что CSS забрал у Sass

Свойство, чьё имя начинается с двух дефисов, — пользовательское: --brand: rgb(0, 0, 255). Вы уже встречали такое в анимации переменной через @property. Сам браузер ни к чему это свойство не применяет, а подставляет его значение туда, где написано var(--brand). Имя придумываете вы, и регистр в нём важен: --brand и --Brand — два разных свойства.

Главное в нём то, что это обычное свойство CSS. Его объявляют в правиле для каких-то элементов, оно спорит в каскаде и наследуется, как цвет. Поэтому общие значения по традиции объявляют в правиле для :root. Этот псевдокласс выбирает корень документа, элемент <html>, и от корня переменная по наследству доходит до каждого элемента страницы. А переопределить её можно на любом элементе поменьше — всё внутри получит новое значение.

Ниже две кнопки с одним правилом .btn. Вторая лежит внутри блока .promo, который задаёт --brand заново. Прибор меряет и переменные: имя с двумя дефисами передают вторым аргументом, как имя свойства. Предскажите обе строки: какое значение --brand окажется у каждой кнопки, хотя на самих кнопках его никто не объявлял, и какого цвета будет их текст?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пользовательские свойства: --имя и var()</title>
  <style>
  :root { --brand: rgb(0, 0, 255); }
  .btn { color: var(--brand); }
  .promo { --brand: rgb(0, 128, 0); }
</style>
</head>
<body>

<button class="btn">Купить</button>
<div class="promo">
  <button class="btn">В корзину</button>
</div>
</body>
</html>

measure(".btn", "--brand");
measure(".btn", "color");

Второй аргумент var() — запасное значение: var(--w, 100px) подставит 100px, если --w не задана ни на элементе, ни у его предков. Но годится ли значение переменной для свойства, браузер проверяет только при подстановке, и это главный источник тихих поломок. --w: 150 — законная переменная: для неё это просто текст. Полосы ниже лежат в обёртке шириной 200px. У второй --w: 150px, у третьей в значении забыли единицы. Предскажите три ширины.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пользовательские свойства: --имя и var()</title>
  <style>
  .wrap { width: 200px; }
  .bar { height: 10px; width: var(--w, 100px); }
  .wide { --w: 150px; }
  .typo { --w: 150; }
</style>
</head>
<body>

<div class="wrap">
  <div class="bar"></div>
  <div class="bar wide"></div>
  <div class="bar typo"></div>
</div>
</body>
</html>

measure(".bar", "width");

Запасное значение в var() спасает от переменной, которой нет, но не от переменной с ошибкой. Опечатка в значении не выглядит ошибкой: свойство молча получает начальное значение, и правила выше в коде уже не помогут.

Пользовательские свойства — Baseline widely с 05.10.2019: пишите. Главная их сила в том, чего Sass дать не мог: переменная живёт в каскаде, поэтому её можно переопределить на классе, на одном элементе или даже из JavaScript — одной строкой на корневом элементе. Так делают темы и размеры под устройство. Про смену темы одной строкой — часть II: тема одной строкой через класс на корне и CSS-переменные.

Стили одного компонента удобно держать рядом: сама карточка, её заголовок, её вариант. Вложенность разрешает писать правило внутри правила. Вложенное .title { … } внутри .card { … } значит .card .title — заголовок где угодно внутри карточки. Знак & обозначает сам селектор внешнего правила; он нужен, когда речь не о потомке, а о той же карточке: &.title — это .card.title, один элемент с обоими классами. Им же удобно записать и другую связь: & > p — прямые дети карточки.

В примере карточка с заголовком внутри и отдельный абзац, у которого оба класса сразу. Внутри .card два вложенных правила, и отличаются они только знаком &. Предскажите оба цвета.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Вложенность и знак &amp;</title>
  <style>
  .card {
    color: rgb(0, 0, 255);
    .title { color: rgb(255, 0, 0); }
    &.title { color: rgb(0, 128, 0); }
  }
</style>
</head>
<body>

<div class="card">
  <p class="title">Заголовок внутри</p>
</div>
<p class="card title">Карточка-заголовок</p>
</body>
</html>

measure(".title", "color");

Вложенность пришла в CSS из Sass, и старое правило легко перенести как есть — вместе с ловушкой. В Sass популярна запись &__title внутри .card: Sass склеивает текст и получает класс card__title. Так части компонента называют по соглашению BEM — блок, два подчёркивания, элемент. Ниже запись перенесена один в один. Предскажите цвет абзаца.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Вложенность и знак &amp;</title>
  <style>
  p { color: rgb(0, 0, 0); }
  .card { &__title { color: rgb(255, 0, 0); } }
</style>
</head>
<body>

<p class="card__title">Заголовок</p>
</body>
</html>

measure("p", "color");

Об этой ловушке предупреждала заметка на полях в статье про селекторы и судью каскада. Там же вторая ловушка — вес знака: & весит как самый сильный селектор из списка внешнего правила, и внутри #box, .card он тянет вес id, даже если элемент нашёлся по классу.

И правило на каждый день: не вкладывайте глубже двух уровней. Каждый уровень дописывает к селектору ещё кусок. Три вложенных правила .menu, .list и .item дают селектор .menu .list .item весом (0, 3, 0). Такое правило перебьёт почти любой класс, написанный потом, и перестанет работать, как только разметку перестроят. Во второй задаче вы посчитаете, чем это кончается.

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

Вложенность — Baseline widely с 11.06.2026: пишите.

Кнопке часто нужен второй цвет из того же первого: рамка потемнее, фон отключённой кнопки побледнее, оттенок при наведении. В Sass для этого брали функции lighten() и darken(): они сдвигали светлоту цвета при сборке, и результат был зашит в файл навсегда. В CSS есть color-mix() — функция, которая смешивает два цвета в заданной доле уже в браузере. color-mix(in srgb, rgb(0, 0, 255), black 20%) — синий, в который подмешали 20% чёрного. Слова in srgb называют пространство, в котором браузер смешивает: srgb — привычные доли красного, зелёного и синего. Другие пространства, например oklch, смешивают ближе к тому, как цвет видит глаз, но проверять удобнее числа srgb.

Подмешать можно и transparent — полностью прозрачный цвет. Предскажите фон трёх кнопок на странице примера. Подсказка: смешанный цвет браузер записывает не как rgb(), а color(srgb красный зелёный синий), где доли идут от 0 до 1. Прозрачность, если она есть, стоит в конце после косой черты.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>color-mix() вместо lighten и darken</title>
  <style>
  .btn { background-color: rgb(0, 0, 255); }
  .dark { background-color: color-mix(in srgb, rgb(0, 0, 255), black 20%); }
  .soft { background-color: color-mix(in srgb, rgb(0, 0, 255), transparent 50%); }
</style>
</head>
<body>

<button class="btn">Обычная</button>
<button class="btn dark">Темнее</button>
<button class="btn soft">Прозрачнее</button>
</body>
</html>

measure(".btn", "background-color");

Соберём три возможности в одном месте. Кнопка берёт фон из --brand, вариант &.danger переопределяет переменную, вложенный .icon задаёт ширину значку. Полоса .muted лежит вне кнопок и смешивает --brand с белым пополам. Предскажите три строки, а с третьей не спешите: какое значение --brand видит полоса, которая лежит снаружи?

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>color-mix() вместо lighten и darken</title>
  <style>
  :root { --brand: rgb(0, 0, 255); }
  .btn {
    background-color: var(--brand);
    .icon { display: inline-block; width: 16px; }
    &.danger { --brand: rgb(255, 0, 0); }
  }
  .muted { height: 10px; background-color: color-mix(in srgb, var(--brand), white 50%); }
</style>
</head>
<body>

<button class="btn">Купить</button>
<button class="btn danger">Удалить <span class="icon"></span></button>
<div class="muted"></div>
</body>
</html>

measure(".btn", "background-color");
measure(".icon", "width");
measure(".muted", "background-color");

color-mix() — Baseline widely с 09.11.2025: пишите.

Sass — язык стилей поверх CSS. Файл с расширением .scss выглядит как CSS с добавками: переменные со знаком $, миксины, циклы. Браузер такой файл не читает. Перед выкладкой компилятор sass — программа, которую ставят отдельно и запускают в терминале, — переводит его в обычный .css. Ниже сеанс терминала. Строка, которая начинается со знака $ и пробела, — команда: первая печатает файл кнопки, вторая компилирует его. Что напечатал компилятор, показано под листингом.

$ cat button.scss
$brand: rgb(0, 0, 255);

@mixin tone($color) {
  color: $color;
  border: 2px solid $color;
}

.btn {
  @include tone($brand);

  @each $name, $color in (danger: rgb(255, 0, 0), ok: rgb(0, 128, 0)) {
    &--#{$name} {
      @include tone($color);
    }
  }
}
$ npx sass button.scss

Посмотрите, чего нет в результате: ни $brand, ни @mixin, ни цикла. Sass вычислил всё до браузера и оставил три готовых правила. Отсюда главное отличие от --brand: переменную Sass нельзя поменять на классе или в разметке — к тому времени, когда страница открылась, её уже нет. А имена btn--danger и btn--ok Sass собрал из &--#{$name} склейкой текста, которой, как вы видели, браузер не делает.

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

Переменные, вложенность и смешение цветов CSS забрал себе. За Sass осталось три вещи. Первая — миксин с аргументами: именованный набор объявлений, который вставляют с разными значениями. Миксин выше CSS заменил бы одной переменной на класс, но в библиотеках миксины бывают на десятки строк. Вторая — цикл, который пишет правила по списку. Третья — модули @use: у каждого файла стилей свои переменные, и они не мешают другим файлам. Объявлять свои функции CSS пока почти не умеет: правило @function есть только в Chrome и Edge 139+, это limited — не рассчитывайте. А @mixin не поддерживает ни один браузер.

Sass жив: версия 1.104.1 вышла 12.09.2026, а пакет sass за неделю с 5 по 11 сентября 2026 года скачали 22 318 469 раз. Но это отдельный инструмент: нужны Node.js, установка пакета и шаг сборки. Пролог обходится одним файлом, который открывается в браузере без всего этого, поэтому Sass здесь только показан. Less, второй такой язык тех же лет, устроен по той же схеме.

Если Sass всё же встретится, не берите инструкции из старых учебников. Правило @import и глобальные функции вроде lighten() Sass объявил устаревшими в версии 1.80.0 от 17.10.2024: сегодня они печатают предупреждения, а в Dart Sass 3.0.0 их уберут. Пакет node-sass закрыт 24.07.2024, LibSass, на котором он работал, — 24.10.2025. Нынешний Sass — это пакет sass и модули @use.

Проект доски в части IV тоже обходится без Sass: имена классов там изолируют CSS-модули, а тему держат переменные — CSS-модули и переменные темы.

Сведём в одну таблицу приёмы, которые заменил сам CSS. Три строки — из этой статьи, остальные — из статей главы, и в правой колонке сказано, куда вернуться.

Всё в средней колонке — Baseline widely: пишите. Левая колонка ещё встретится в чужом коде. float и normalize.css браузер понимает до сих пор, а записи Sass — только после сборки. Переписывать работающее ради таблицы не нужно, но новое пишут по средней колонке.

Всё в прологе работает без сборки. Файл, созданный в статье про скелет страницы и первый файл на диске, открывается двойным щелчком, и стили в <style> браузер читает как есть. Сборщик — программа, которая перед выкладкой делает из исходников готовые файлы: переводит .scss в .css, склеивает много файлов в несколько, стирает типы TypeScript.

Признаков, что без сборщика уже не обойтись, два. Первый — скрипт подключает чужой пакет по одному имени, например "date-fns", а не по пути к файлу. Браузер ищет файлы по адресу, а имя пакета — не адрес. К тому же пакет тянет за собой свои пакеты: отыскать их все в папке node_modules и свести в готовые файлы поручают сборщику. Второй — десятки файлов стилей и скриптов, разложенных по компонентам: их нужно свести в несколько готовых и не перепутать порядок.

В 2010-х такую работу делал Gulp — программа, которая по списку задач гоняла Sass, сжатие и склейку файлов. Пакет gulp жив, но за неделю с 5 по 11 сентября 2026 года его скачали 1 483 464 раза — около 1,1% от 132 485 786 загрузок сборщика Vite.

В учебнике сборщик появится постепенно. В части I статья про модули объяснит, откуда сборщики взялись и почему модулю даже на своём компьютере нужен локальный сервер, а Vite встретится в финале первого проекта, в списке того, что учить дальше. Как пакет ставят в проект командой в терминале и что с кодом делает сборщик, покажет часть III — установка TypeScript и три способа запустить .ts.