CSS to SCSS Converter

About the CSS to SCSS Converter

What is a CSS to SCSS converter?

Any CSS file is already valid SCSS, so a converter that only changed the extension would be honest and useless. What people actually want is the shape SCSS gives you, with rules that share an ancestor folded inside it, states written with an ampersand instead of repeating the selector, and colors that appear over and over pulled out into a variable at the top.

That's what this does. Paste a stylesheet and it comes back nested, with the repetition collapsed, ready to keep editing.

The part worth trusting is the check. Nesting is not always safe. Two rules with the same selector sitting at opposite ends of a file are in a particular order for a reason, and folding them together silently moves one of them in the cascade. So after nesting, this tool expands its own output back into flat rules and compares them with what you pasted, rule by rule and declaration by declaration. The badge above the input says whether that comparison passed. If a stylesheet ever fails it, the rules are left flat rather than handing you something that looks tidier and behaves differently.

How to Use This Tool

1. Paste or open your CSS. Conversion runs as you type, and the file never leaves your browser.
2. Choose how far to fold. Nesting groups descendants, the ampersand option folds hover and focus states onto their parent, and media queries can either wrap rules or sit inside them.
3. Decide about variables. Any color used at least twice becomes $color-1 and up. Raise the threshold if you only want the truly repeated ones lifted.
4. Read the badge. Checked means the nested output expands back to exactly the rules you pasted.
5. Take the file. Copy it or download style.scss.

Common Use Cases

Converting is a starting point, not a finished refactor, and it's most useful in these situations.

• Adopting a build step: an old hand-written stylesheet moved onto Sass without a day of manual reindenting.
• Reading someone else's CSS: nesting makes the structure of an unfamiliar file obvious in a way a flat list of selectors never does.
• Extracting a theme: the variables list tells you at a glance how many colors a stylesheet really uses, which is usually more than anyone expects.
• Porting a component: paste the rules for one component and get a single nested block you can drop into a partial.
• Learning Sass: putting familiar CSS in one side and reading the nested version out of the other is a fast way to see what the syntax buys you.

Going the other way? The SCSS to CSS Converter compiles it back. The CSS Formatter tidies the input first, and the CSS Minifier compresses the compiled result. Or browse all our free developer tools.

Frequently Asked Questions

Is nesting always safe?

No, and that's why this tool checks. Folding .card .title inside .card is harmless. Folding two separate .card blocks together is not, because anything written between them may have been relying on the order. This converter only folds a rule into a block that's still open directly above it, never one that closed earlier in the file, and then it proves the result by expanding it back and comparing.

Why is my file barely nested?

Because the related rules aren't next to each other. A stylesheet grouped by component nests deeply. One where every hover state is collected at the bottom, or where a section is defined twice hundreds of lines apart, nests shallowly, because folding those together would move them in the cascade. Running the file through a formatter and grouping related rules first will get you a much deeper result.

What does the ampersand actually do?

Inside a nested block, & stands for the full parent selector with no space between them. So &:hover inside .btn compiles to .btn:hover, while :hover on its own would compile to .btn :hover, which means something completely different. It's the difference between the button being hovered and something inside the button being hovered.

How deep should nesting go?

Three levels is the usual advice, and it's good advice. Every level adds to the specificity of the compiled selector, and deeply nested SCSS produces selectors that are hard to override and tied to a particular markup structure. If the output here goes deeper than you're comfortable with, that's a signal about the original CSS rather than about the conversion.

Why weren't my colors turned into variables?

Only colors that appear at least twice are lifted, since a one-off doesn't gain anything from a name. Colors written as rgb(), hsl() or a keyword are left alone, and so is anything inside a url(), because an SVG fragment like url(#abc) looks exactly like a three digit hex and is not one.

Should I use SCSS variables or CSS custom properties?

They solve different problems. A Sass variable is resolved at build time, so it costs nothing at runtime but can't change in the browser. A custom property is live, so it can be swapped for a dark theme or changed from JavaScript. Most projects use both, with Sass variables for values that never change and custom properties for anything a theme touches.

Does my CSS get uploaded anywhere?

No. The parser and the converter both run in your browser, with no request to any server and nothing loaded from a third party. You can open the network tab and watch, or disconnect and it will still work.