CSS to SCSS Converter
Convert plain CSS to SCSS (Sass) online. Automatically nests selectors, converts variables to $vars, and reformats media queries. Free, no registration.
What is CSS to SCSS Converter?
CSS to SCSS Converter transforms plain CSS into Sass/SCSS syntax. It automatically nests related selectors, converts CSS custom properties (--var-name) into Sass variables ($var-name), and reformats the code to follow SCSS conventions. The result is cleaner, more maintainable stylesheet code ready to drop into any Sass-based project.
How to Use CSS to SCSS Converter
- Paste your CSS into the input area on the left
- Enable or disable 'Nest selectors' and 'Convert CSS vars to $vars' as needed
- Click 'Convert' to generate SCSS output
- Copy or download the resulting SCSS file
CSS to SCSS Features
- Automatic selector nesting (parent .child becomes parent { .child { } })
- CSS custom property conversion (--color to $color)
- Preserves comments, media queries, and keyframes
- One-click download as .scss file
Frequently Asked Questions
Is the output valid SCSS?
Yes. The converter produces standard SCSS compatible with Sass 1.x and any SCSS preprocessor.
What happens to CSS custom properties?
When 'Convert CSS vars to $vars' is enabled, --my-color is replaced by $my-color throughout the output, and a $vars declaration block is added at the top.
Does it handle media queries?
Media query blocks are preserved as top-level @media rules. They are not nested inside selectors, which matches standard SCSS best practices.