JSONFormatting.org

CSS Tool

CSS to SCSS Converter

Turn flat CSS rules that share a common selector into clean, nested SCSS.

Home › Tools › CSS to SCSS Converter
SCSS Output
Output will appear here

Nest flat CSS into SCSS

Paste flat CSS where related rules share a common leading selector — like .nav, .nav a, and .nav a:hover — and this tool groups them into SCSS's nested syntax, which is usually shorter to write and easier to scan once you're working in Sass.

What this does (and doesn't do)

This tool nests rules by their common first selector segment — it's a structural transformation, not a full Sass compiler. It does not generate variables, mixins, or @extend rules, and it doesn't try to merge every possible related selector (like recognizing that a:hover could nest one level deeper inside a separate a { } block) — it groups by shared prefix, one level deep. For straightforward, real-world flat CSS, this covers the large majority of useful nesting.

Typical use cases

  • Migrating a plain CSS file into a Sass-based project: Get a solid nested starting point instead of nesting everything by hand.
  • Cleaning up generated or exported CSS: Turn flat, repetitive selectors into a more maintainable nested structure.

Frequently Asked Questions

No, this tool only goes one direction: flat CSS into nested SCSS syntax. Compiling actual SCSS (with variables, mixins, and imports) back into CSS requires a real Sass compiler, which is a different and much larger tool.
Yes, when the pseudo-class immediately follows the parent (like .nav a:hover relative to .nav a), it's grouped under the same parent and nested using & syntax where applicable.
Standard CSS custom properties (--my-var) pass through as regular declarations. This tool focuses on selector nesting, not converting CSS variables into SCSS variables, since those are different concepts (Sass variables are compile-time, CSS custom properties are runtime).
No, the conversion runs entirely in your browser.