CSS to SASS Converter

The indented Sass syntax, the one behind .sass files rather than .scss, drops braces and semicolons entirely. Converting half a dozen rules by hand is fine; converting forty is not, and a single leftover semicolon is enough to make the compiler complain. Paste CSS on one side and the .sass version appears on the other, with two spaces of indentation per declaration.

Underneath sits a deliberately small parser: it scans selector and block pairs and rewrites each declaration as an indented prop: value line, keeping the colon that indented Sass still requires. That works cleanly for flat rules, and it has no concept of a block inside a block. Feed it a media query: the inner rules convert while the @media line itself drops out of the result with no warning.

So pull media queries out, convert each block on its own, then put the @media line back and indent the content under it. Comments in /* */ get glued to the selector line and need a quick cleanup. The tool also never invents nesting and never promotes a repeated color to a $variable, which stays your call. Copy and clear buttons sit below the output, and no CSS ever leaves your browser.