Developer

CSS to SCSS Converter

Convert CSS to nested SCSS with variables.

CSS input
SCSS output

This free CSS to SCSS converter rewrites plain CSS into SCSS syntax. It can nest rules that share a parent selector (turning .card and.card .title into nested blocks) and pull repeated color values out into $variables at the top. Choose your indent (2 spaces, 4 spaces or a tab), open a .css file or drag one onto the editor, then copy or download valid SCSS you can drop straight into a Sass build.

Both panes are syntax-highlighted as you type, malformed CSS (such as unbalanced braces) is flagged inline, and a live count shows how many rules were parsed and how many variables were extracted. Everything runs entirely in your browser — no code is uploaded to a server.

Related tools