CSS to SCSS Converter

The part nobody mentions about migrating CSS to SCSS: there is barely a migration. Every valid CSS file is already valid SCSS, so renaming the extension is enough for the build to work. The real work is something else, and it is tedious: going through the file swapping custom properties, the double hyphen ones, for Sass dollar variables. That is precisely what this tool does, and all it does.

Two text substitutions, nothing more. A declaration starting with two hyphens followed by a colon and a value becomes the same line with a dollar sign, and every var call wrapping a custom property becomes the dollar reference. Everything else passes through untouched: selectors, media queries, comments. Two known catches: a var call with a fallback after the comma is not recognised and stays as is, and a declaration needs its closing semicolon to be detected.

What breaks the build later is scope. Your custom properties most likely live inside the root block; once they turn into dollar variables they are still in there, and a Sass variable declared inside a block only exists inside that block. Move the declarations to the top of the file or into a variables partial after converting. And do not convert what you change at runtime: class based themes, values that shift in a media query. Dollar dies at build time, double hyphen lives in the browser.