CSS to SCSS

Nesting reorders rules, and that is risky

The main hazard of converting CSS to SCSS is not the syntax. When a rule like .a .b moves inside .a, its position in the file changes. If a third rule between them set the same property, a different one wins after the conversion. The file looks the same, but the page renders differently, and that kind of breakage is hard to track down.

We move a rule into its parent only when nothing between them sets the same properties. Rules with no properties in common cannot conflict in any order, so such a move is safe. Where a move is impossible, the rule stays flat, and the page tells you which properties blocked it.

The result is verified against your source

We expand the compiled SCSS back into flat CSS and compare it with what you submitted. Both the set of declarations and the order within each property must match. If it matches, the page says so, with the declaration count. If it does not, we fall back to a strictly safe layout where only adjacent rules move into their parents, and verify again. We do not hide a mismatch: it is shown on the page.

Variable names that carry meaning

Repeated values go into variables, but never under names like $color_1: you would rename those by hand anyway, and the work would be wasted. A color takes the name of the color closest to it, and a size takes its name from the property it appears in. A 16-pixel margin becomes $space-16, a border radius becomes $radius-8. The nearest color is searched in a space where distance matches perceived difference, otherwise dark blue keeps being reported as black.

What nesting understands

Descendants, direct descendants, and siblings; states via &:hover; extra classes and attributes; BEM notation, so .card__title becomes &__title inside .card. Similar class names are not merged: .cardio will not end up inside .card. We do not nest more than four levels deep, because a deeper file stops being readable.

The reverse direction

SCSS compiles to real CSS: variables, nesting, mixins, and functions. A compressed-output switch is available for production sites. What we cannot do, we say openly: @use and @import from neighboring files are not supported, because the page only has the pasted text.

Related tools

For a new palette, colors are easy to pick with a palette from an image; converting a single color between HEX, RGB, and HSL is the job of HTML color codes; and finished markup can be checked with the HTML validity check.