How the CSS to SCSS converter nests your CSS — and what to check afterward

Start with the essential

Many CSS to SCSS converters optimize for neat-looking output and freely move rules or media queries. That can change the cascade: a declaration that used to win can become overridden after conversion. This tool keeps its changes to a small, predictable set so you can review exactly what moved.

Put it into practice

With the default nesting rules, or with the field left empty for standard BEM detection, selectors such as .c-button__label and .c-button--primary are nested as &__label and &--primary. With or without your own rules, rules that share the same root are gathered into one block, so .c-button and .c-button__label end up inside a single .c-button { … }, even when other rules sit between them in the source. Declarations for the same selector keep their original order, but a rule can move ahead of an unrelated selector it used to follow. If two different selectors style the same element, compare the output with your original CSS before you commit.

A detail worth checking

If your naming does not follow plain BEM, you can describe it yourself with nesting rules, one per line. In a rule such as .*-*&__*&--, * stands for a name and & marks where a new nesting level starts, so .c-card__img--cap becomes .c-card { &__img { &--cap { … } } }, and the default rule .*-*.&*-* turns .c-card.is-disabled into .c-card { &.is-disabled { … } }. Pseudo-classes and pseudo-elements such as :hover and ::before are nested as &:hover automatically, and a selector list such as .c-box__header, .c-box__time becomes &__header, &__time when only the last part differs. Selectors that match none of your rules are left exactly as written and counted in the conversion report. Media queries are never reordered; only adjacent blocks with an identical condition are merged.

Your next step

The tradeoff is intentional. The first version does not attempt to fully interpret CSS Modules, @layer, complex @supports rules, already-nested CSS, or SCSS-only syntax. It also does not reorder properties. The goal is a useful conversion that is easy to review, not aggressive formatting that hides a behavior change.

Use this as a small, repeatable check rather than a one-time task.