CSS to SCSS
Paste plain CSS and get neatly formatted SCSS, since valid CSS is already valid SCSS.
Example
Minified CSS in, formatted SCSS out:
/* input */
.card{display:flex;padding:16px;color:#FFFFFF}
/* output */
.card {
display: flex;
padding: 16px;
color: #ffffff;
}How it works
It runs your CSS through Prettier using the SCSS parser, producing consistently formatted .scss output. No nesting is invented; it preserves your rules while normalizing spacing, indentation, and quotes.
Good to know
This CSS to SCSS converter takes plain CSS and outputs the same rules saved as a clean, consistently formatted .scss file. It exists because of a quirk of the Sass language: every valid CSS file is already valid SCSS, so "converting" is really a matter of changing the file extension and tidying up the formatting. It's aimed at front-end developers who are migrating a project to Sass and want a sensible starting point for their stylesheets.
Reach for it when you've inherited or exported a flat CSS file and want to bring it into an SCSS codebase, or when you've pasted minified or messily indented CSS and need it reflowed into something readable. Paste your CSS on the left, click Convert, and the right pane fills with two-space-indented SCSS. The Load sample button gives you a quick demo including a media query and an rgba() value so you can see the formatting behaviour before using your own code.
Read the output as a faithful, reformatted copy of your input rather than a rewritten one. The selectors, properties, and values are identical; only cosmetic details change, such as lowercased hex colors, standardized quotes, and uniform whitespace. If the output pane stays empty and a red status appears, your input contained a syntax error that the parser could not handle, and the message shows the first line of the problem.
The key caveat: this is a formatter, not a refactorer. It will not nest your selectors, extract repeated values into $variables, or generate mixins for you, since it cannot safely infer your intent from flat CSS. After converting, expect to do the actual Sass restructuring (nesting, variables, partials) by hand. Everything runs locally in your browser, so even large or proprietary stylesheets never leave your device.
Frequently asked questions
Does this add SCSS nesting or variables automatically?
No. Because valid CSS is already valid SCSS, the tool only reformats your code with Prettier's SCSS parser. It will not infer nested selectors, $variables, or mixins from flat CSS.
Why does my color or spacing change slightly?
Prettier normalizes the output: hex colors are lowercased, quotes and whitespace are standardized, and indentation is set to two spaces. The styles themselves are unchanged, only their formatting.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
Is CSS valid SCSS?
Yes. SCSS is a strict superset of CSS, so any valid CSS file is also valid SCSS. You can rename a .css file to .scss and it will compile without changes, which is why converting between the two is mainly a formatting step.
What is the difference between SCSS and Sass?
SCSS uses the same curly-brace and semicolon syntax as CSS, while the older Sass (indented) syntax omits braces and semicolons and relies on indentation instead. Both compile to plain CSS and support the same features like variables, nesting, and mixins.
Will this tool automatically nest my CSS selectors?
No. It only reformats your code and preserves the rules exactly as written. Converting descendant selectors into nested SCSS blocks requires understanding your intent, so that restructuring has to be done manually.
Why does my hex color change from uppercase to lowercase?
The formatter normalizes hex color values to lowercase as part of standardizing the output. The color itself is unchanged; for example #FFFFFF and #ffffff render identically.
Do I need to install Sass to use the converted file?
To produce final CSS from the .scss file you would compile it with a Sass compiler such as Dart Sass or a build tool. The converted file is plain text that you save with a .scss extension; this tool only handles the conversion, not the compilation.
Can I convert minified CSS into readable SCSS?
Yes. Pasting minified or single-line CSS produces output with each declaration on its own line and two-space indentation, making it easier to read while keeping the styles identical.
What happens if my CSS has a syntax error?
The output stays empty and a status message reports the input as invalid, showing the first line of the parser error. Fixing the reported issue in your CSS and converting again resolves it.
Related tools