Micro Tools
Advertisement

CSS to SCSS

Paste flat CSS and convert it into nested SCSS. Selectors sharing a prefix are grouped, descendant selectors become nested blocks, and media queries are kept intact at the end.

CSS to SCSS

Paste flat CSS below.

Advertisement

How the conversion works

Each CSS rule is split into selector parts, and parts are merged into a tree so .card .title becomes a .title block nested inside .card. Rules that share a selector are merged, combinators like > are kept with their selector, and at-rules such as media queries are emitted unchanged.

Why nest with SCSS

Nesting mirrors your HTML structure, which makes stylesheets shorter and easier to scan. Converting legacy flat CSS is the quickest first step when migrating a project to Sass, and the output compiles with any standard Sass toolchain.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

CSS to SCSS FAQs

Are pseudo-classes handled?
Yes. Selectors like .card:hover nest as written, so .card .title:hover becomes a :hover block inside .title inside .card. They are not rewritten with the & parent selector.
What happens to media queries?
Media queries cannot nest safely in every context, so they are passed through unchanged at the end of the output. Move them manually if you want them nested inside a selector.
Are duplicate selectors merged?
Yes. If .card appears in three separate rules, all of its declarations end up in one nested .card block instead of three.
Does it convert to the indented Sass syntax?
No, the output uses the SCSS brace syntax, which is a superset of CSS and works with every Sass compiler. Converting braces to indentation is a separate step.
Is my CSS uploaded?
No. Parsing and nesting run entirely in your browser, so stylesheets never leave your device.
Advertisement