About the CSS to SCSS Converter
Moving a project to Sass usually starts with existing CSS. Plain CSS is already valid SCSS, but it does not use nesting, which is the main readability win. This converter parses the stylesheet and, when a rule's selector starts with an earlier rule's selector, places it inside that rule as a nested block, using & for pseudo-classes and modifier classes such as &:hover and &.active.
Rules that do not share a parent stay top-level. At-rules such as @media are kept as blocks at the position they appeared. Declarations, comments and property order are unchanged, so compiling the result with the SCSS compiler produces a stylesheet equivalent to the original.
Nesting is inferred from the text of selectors, so unusual selectors with commas, attribute brackets or combinators may not group perfectly; review the result. Extracting variables and mixins remains a human job.
How to use
- Paste CSS on the left.
- Copy the nested SCSS.
- Compile it with the SCSS to CSS tool to confirm it produces the same styles.
Common questions
- Does it create variables from repeated colours?
- No. It nests rules only; variable extraction is a design decision better made by hand.
- Is the output valid SCSS?
- Yes. Nesting is the only Sass feature used, so any Sass compiler accepts it.
- How deep does it nest?
- As deep as the selectors imply. If the result is deeper than three levels, consider flattening some rules for readability.