CSS to SCSS
Convert flat CSS into nested SCSS with & selectors.
CSS to SCSS Converter
Migrating a legacy stylesheet to Sass? Paste the CSS and get SCSS with real nesting instead of a copy with a new file extension. The converter groups selectors by their parent, turns pseudo-classes and pseudo-elements into &:hover and &::before blocks, keeps combinators like > and +, and leaves your values untouched.
What changes and what stays
| CSS | SCSS |
|---|---|
.card .title {} | .card { .title {} } |
.btn:hover {} | .btn { &:hover {} } |
.menu > li {} | .menu { > li {} } |
@media (…) { .a .b {} } | @media (…) { .a { .b {} } } |
Declarations, comments, @font-face, and @keyframes are kept as they are, and the indentation can be 2 spaces, 4 spaces, or tabs.
Why nest?
Nesting mirrors the structure of your HTML components, removes repeated selector prefixes, and makes it obvious which styles belong together. It is also the first step toward a clean Sass architecture with partials, variables, and mixins.
Avoid nesting deeper than three or four levels – very long compiled selectors are harder to override. If the converter produces deep nesting for a long selector, that is a hint that the original selector could be simplified.
Verified output
After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact. For CSS input, the check compares the SCSS compiled by Dart Sass with your original CSS.
Continue with Sass
Replace repeated colors with $variables, move repeated declaration groups into @mixins, and split the file into partials. Use the SCSS Compiler to test your changes, or SCSS to Sass if your project uses the indented syntax.
Frequently Asked Questions
Can I just rename my .css file to .scss?
Yes, every CSS file is valid SCSS. Converting adds nesting so the code benefits from what Sass offers; renaming alone changes nothing.
Does the converter handle media queries?
Yes. Media queries stay at their position and the rules inside them are nested independently.
How deep does the nesting go?
As deep as your selectors. Each descendant level becomes one nested block; selectors with commas are only nested when every part shares the same parent.