// transform plain CSS into properly nested SCSS
Convert plain CSS to properly nested SCSS. Groups shared parent selectors, extracts CSS variables to SCSS variables, and formats clean output — free, no signup.
Paste CSS and click Convert
Or type and it converts liveDrop any plain CSS into the left editor. The converter handles flat rulesets, @media blocks, :root variables, pseudo-classes, and combinators.
Toggle nesting, variable extraction, media mixins, and comment generation from the options bar above. Pick your preferred indent style.
Click "⎘ Copy" to grab the SCSS, or "↓ .scss" to download the file. The stats bar shows rules nested, variables extracted, and total output lines.
The CSS to SCSS Converter takes flat CSS and restructures it into properly nested SCSS. It groups child selectors inside their parent blocks, converts --css-variables to $scss-variables, and optionally wraps media queries in reusable @mixin / @include patterns — all in the browser with zero dependencies.
The converter parses each CSS rule, splits its selector on whitespace and combinators (>, +, ~), then groups rules sharing a common parent into nested SCSS blocks. Pseudo-classes and pseudo-elements attached directly to the parent use the & reference.
Yes. When "Extract variables" is enabled, --custom-property declarations in :root are hoisted as $scss-variable declarations at the top of the output. All var(--name) references in the rest of the file are updated to use the SCSS variable.
When enabled, a @mixin respond-to($bp) helper mixin is prepended to the output, and each @media block is converted to an @include respond-to(name) call with the media condition stored as the mixin argument — keeping breakpoints DRY and named.
Yes. The converter handles class, ID, attribute, pseudo-class (:hover, :nth-child()), pseudo-element (::before), and combinator selectors (>, +, ~). The & parent reference is applied automatically where the child attaches directly to the parent.
Yes. Nesting is purely structural — no selectors are added or removed. When compiled, the nested SCSS produces identical CSS to the input. The only semantic change is variable extraction, where literal values are replaced with variable references that resolve to the same values.
The converter is tolerant and will convert whatever is valid. Rules with unmatched braces or badly malformed syntax may be skipped or passed through as-is. The stats bar shows how many rules were processed successfully.
SCSS (Sassy CSS) is the most widely used CSS preprocessor syntax. Its biggest advantage over plain CSS is nesting — the ability to write child rules inside their parent context, making the relationship between selectors explicit and the stylesheet far easier to read and maintain. This converter takes any flat CSS and does that transformation automatically.
Flat CSS forces you to repeat the parent selector on every line: .nav ul, .nav ul li, .nav ul li a. In SCSS, these live inside a single .nav { } block. When you rename .nav, you change one line instead of twenty. Nesting also makes the visual structure of the code mirror the HTML tree, reducing cognitive load during maintenance.
SCSS uses the & symbol to reference the current parent selector. This is essential for pseudo-classes and modifier classes: &:hover compiles to .element:hover, and &.active compiles to .element.active. The converter automatically applies & where the child selector should attach directly to the parent without a descendant space.
SCSS variables ($color: #c8f135) are resolved at compile time and do not exist in the output CSS. CSS custom properties (--color: #c8f135) exist at runtime and can be changed with JavaScript or overridden in media queries. This tool converts the former to the latter, keeping your SCSS DRY during migration while preserving the original intent of each value.