About

Manually refactoring flat CSS into nested SCSS is error-prone. A misplaced brace or a wrong & reference breaks the entire compiled output, and debugging generated CSS back to its SCSS source wastes hours. This converter parses your CSS into an abstract syntax tree, identifies selector relationships via longest common prefix matching, and reconstructs the rules as properly nested SCSS with parent selectors (&). It handles pseudo-classes, pseudo-elements, BEM patterns, combinators, media queries, and @keyframes. The tool approximates optimal nesting depth assuming standard specificity practices. Note: it does not infer @mixin or @extend usage since those require design-intent knowledge the source CSS cannot provide.

Formulas

The converter operates on a deterministic parsing pipeline rather than mathematical formulas. The core logic follows three stages:

tokenize(css) → tokens[] → buildAST(tokens) → tree → nestSelectors(tree) → scss

Selector nesting uses a Longest Common Prefix algorithm. Given two selectors S₁ and S₂, the shared prefix P is extracted at the compound-selector boundary level:

P = LCP(parts(S₁), parts(S₂))

where parts splits a selector by descendant combinators (spaces) into an ordered list. The remainder after removing P becomes a nested child rule. BEM suffixes (__ and --) trigger the parent reference operator & concatenation instead of descendant nesting. Pseudo-selectors (: and ::) are detected via regex pattern /^[:&\[]/ and always use & joining.

Reference Data

CSS Feature	SCSS Equivalent	Example Input	Example Output
Descendant selector	Nesting	`.nav .link { }`	`.nav { .link { } }`
Child combinator	Nested with >	`.nav > .link { }`	`.nav { > .link { } }`
Pseudo-class	Parent selector &	`.btn:hover { }`	`.btn { &:hover { } }`
Pseudo-element	Parent selector &	`.btn::before { }`	`.btn { &::before { } }`
BEM element	Parent selector &	`.card__title { }`	`.card { &__title { } }`
BEM modifier	Parent selector &	`.card--dark { }`	`.card { &--dark { } }`
Adjacent sibling	Nested with +	`.a + .b { }`	`.a { + .b { } }`
General sibling	Nested with ~	`.a ~ .b { }`	`.a { ~ .b { } }`
Media query	Nested @media	`@media (max-width: 768px) { .nav { } }`	`.nav { @media (max-width: 768px) { } }`
Keyframes	Preserved at root	`@keyframes fade { 0% { } }`	`@keyframes fade { 0% { } }`
Multiple selectors	Split & nested individually	`.a .b, .a .c { }`	`.a { .b, .c { } }`
Attribute selector	Parent selector &	`.input[type="text"] { }`	`.input { &[type="text"] { } }`
Root-level properties	Preserved at root	`:root { --color: red; }`	`:root { --color: red; }`
Comments	Preserved in place	`/* header */ .h { }`	`/* header */ .h { }`
@import	Preserved at root	`@import url('a.css');`	`@import url('a.css');`
@font-face	Preserved at root	`@font-face { font-family: X; }`	`@font-face { font-family: X; }`
Nesting depth limit	Max 4 levels recommended	Deep selectors	Flattened beyond limit

Frequently Asked Questions

Media queries are preserved at root level in the output by default. SCSS supports both approaches, but root-level media queries produce output closest to the original CSS structure and avoid duplicated @media blocks that can bloat compiled output. If a media query contains selectors that share a common parent with rules outside the query, you can manually move the @media block inside the parent selector after conversion.

Vendor-prefixed properties are preserved exactly as written. The converter does not collapse them into @mixin calls because that would require assumptions about your mixin library (Bourbon, Compass, or custom). After conversion, you can manually replace groups of vendor prefixes with your preferred mixin. Look for repeated patterns like -webkit-, -moz-, -ms- clusters in the output.

The current implementation preserves values as-is without extracting $variables. Automatic variable extraction requires semantic understanding of design intent - for example, two elements sharing color #3A86FF might use the same design token or might coincidentally match. Extracting variables incorrectly creates false coupling. The output is clean SCSS that you can then refactor with variables based on your design system knowledge.

The converter follows the actual selector structure from your CSS. If your CSS has a selector like .a .b .c .d .e, the output will nest 5 levels deep. The SCSS community guideline (the Inception Rule) recommends a maximum of 3-4 nesting levels. Over-nesting produces overly specific compiled CSS. Review the output and flatten any nesting beyond 4 levels by extracting inner rules to their own root-level blocks.

Yes. :root selectors and CSS custom properties (--variable-name) are preserved exactly as written. They remain at root level in the SCSS output. The converter treats -- prefixed properties as standard declarations and does not confuse them with BEM modifier syntax (--modifier) because BEM detection only applies to selector names, not property names.

Complex comma-separated selectors with mixed ancestry (e.g., .header .nav, .footer .links) cannot share a common parent and will remain as separate rule blocks. Selectors using :is(), :where(), or :has() pseudo-functions are treated as atomic units and nested via the & operator. @supports blocks are preserved at root level. @layer declarations are passed through unchanged. If you use CSS nesting syntax (the native & operator), the converter will treat it as standard CSS and may produce double-nesting.