Конвертер CSS Nesting

Что такое CSS nesting

CSS Nesting позволяет вам писать дочерние правила и псевдо-классы непосредственно внутри блока родительского селектора, так же, как это всегда позволял Sass/SCSS, но как нативный синтаксис браузера — никакого этапа сборки не требуется:

.card {
  color: #1a1a1a;

  & .title {
    font-size: 20px;
  }

  &:hover {
    background: #f5f5ff;
  }
}

Нативное CSS Nesting было выпущено во всех основных браузерах в 2023 году (Chrome 112, Firefox 117, Safari 17.2), и селектор вложения & — это ключевой момент — он представляет полный родительский селектор везде, где он появляется, так что &:hover становится .card:hover, а & .title становится .card .title. По сравнению с Sass/Less, нативное вложение является подмножеством: оно поддерживает & и простые вложенные блоки (включая вложенные @media/@supports), но не функции, специфичные для Sass, такие как миксины, функции или @extend.

Почему разворачивать обратно

Большинство инструментов, старые браузеры, некоторые CSS-линтеры и CSS-in-JS конвейеры по-прежнему ожидают плоские, one-selector-per-rule таблицы стилей. Этот инструмент берет вложенный CSS и расширяет его в эквивалентные плоские правила — ту же трансформацию, которую выполняют плагины Sass и PostCSS nesting — поэтому вы получаете результат, который работает везде, включая окружения, которые еще не анализируют нативное вложение.

Как использовать

1. Вставьте свой вложенный CSS (используя & и/или обычные вложенные блоки) в поле ввода.
2. Эквивалент развернутого плоского CSS появляется мгновенно в поле вывода — один селектор на правило, с полностью подставленным & и блоками nested-без-&, объединенными с пространством потомка.
3. Скопируйте или загрузите результат как файл .css.

Конвертер отслеживает глубину скобок через произвольно глубокое вложение, подставляет каждое вхождение & в селектор и правильно переопределяет вложенные блоки @media/@supports вокруг селекторов, объявленных внутри них.

Область действия

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

Часто задаваемые вопросы

Обрабатывает ли это комбинаторы > .child, + .sibling и ~ .sibling? Да — пишите их ровно так же, как вы делаете в нативном вложении (> .footer { ... }), и комбинатор сохраняется буквально в развернутом селекторе (.card > .footer).

Что происходит со списками селекторов, разделенными запятыми? Каждое вложенное правило может иметь список селекторов, разделенный запятыми, с обеих сторон; инструмент расширяет каждую комбинацию родитель × дитя, соответствующую семантике нативного вложения.

Поддерживает ли это вложенные @media или @supports? Да — at-rules, вложенные в правило (или содержащие вложенные правила), переопределяются вокруг развернутых селекторов, сохраняя их текст условия.

Он будет проверять мой CSS? Нет — это структурный трансформатор, а не валидатор CSS. Неправильный ввод (несбалансированные скобки) анализируется с максимальным усилием; если анализ полностью не удается, вывод показывает короткий комментарий об ошибке вместо выброса.

Конфиденциальность

Вся конвертация происходит в вашем браузере — ваш CSS никогда не загружается и не сохраняется нигде.