CSS to SCSS: Turn Flat CSS into Nested Rules

How it works

Paste your CSS into the left pane; the nested version appears on the right straight away. The tool splits every selector at spaces and at the > + ~ combinators, then nests consecutive rules that share the same start inside one block. The six rules in the sample end up in two top-level blocks: .menu ul, .menu li and .menu a go inside the .menu block, and .menu a:hover becomes &:hover inside the a block. Rules inside @media are nested the same way within it, but the @media block is never moved into a rule, so the compiled CSS keeps its original order. You can target SCSS (braces and semicolons), LESS, indented Sass or Stylus; the indented formats drop braces and semicolons. Comma-separated selectors (.a, .b) are not split and stay as they are. Comments are removed, and the result line tells you how many.

This tool is also known as css to scss, css to scss converter, css to sass, css to less, css to stylus, convert css to nested scss.

What is SCSS?

SCSS (Sassy CSS) is the syntax of the Sass preprocessor that looks most like CSS. It uses braces and semicolons and adds nested rules, variables starting with $, reusable blocks with @mixin, and arithmetic. Browsers cannot read SCSS; a Sass compiler first turns the file into plain CSS. Every valid CSS file is also a valid SCSS file, which makes it easy to move an existing project over gradually.

What is Nesting?

Nesting means writing a selector's child selectors inside its block: .menu { a { } } compiles to .menu a. The & sign stands for the parent selector, so a { &:hover { } } compiles to a:hover. It saves repeating the same prefix on every line and makes the structure of a component visible in the code. Nesting too deeply, however, produces long selectors with high specificity; staying within three or four levels is the usual advice.

What is the difference between SCSS and Sass?

Both are syntaxes of the same Sass compiler and offer the same features. SCSS (.scss) uses braces and semicolons; anyone who knows CSS can read it straight away, and every CSS file is valid SCSS. Indented Sass (.sass) drops braces and semicolons and separates blocks by indentation alone; it is shorter, but a single wrong space changes what the code means. Most new projects choose SCSS.

Why rule order is preserved

When two CSS rules match the same element with the same specificity, the one written last wins. Some nesting converters gather every rule that starts with the same selector into one block, wherever it sits in the file; in the compiled CSS those rules change places and a button colour can silently change. This tool only merges consecutive rules: if another block comes between two .menu rules, the second .menu stays a separate block.

For the same reason, @media rules are never moved inside a selector. SCSS allows it, but the output order changes. Variables and mixins are not extracted either: turning a repeated colour like #1c1917 into a variable such as $dark is a decision for someone who knows what the code means.

• .menu a { } → .menu { a { } }
• .menu a:hover { } → a { &:hover { } }
• .list > li { } → .list { > li { } } (Stylus: & > li)

Which target to choose

If your project uses Sass and your files end in .scss, choose SCSS; it is the most common syntax today, and every valid CSS file is also valid SCSS. If your files end in .sass, choose indented Sass; it has no braces or semicolons and shows nesting through indentation alone, so copy it without disturbing the indentation.

If you are working on an older theme such as Bootstrap 3 or any project built on LESS, choose LESS; its nesting syntax is the same as SCSS. Stylus is an indented syntax used in some Node.js projects; there, nested combinators are written as & > li.

Frequently asked questions

How do I convert CSS to SCSS?

Paste the CSS into the left pane. The tool splits selectors like .menu a and puts a inside the .menu block, and turns states like :hover into &:hover. Since every valid CSS file is already valid SCSS, simply renaming the file to .scss also works; what the tool adds is the nested, readable structure.

Will my compiled CSS change?

No, the same rules come out in the same order. The tool only merges consecutive rules, leaves @media blocks where they are and does not split comma-separated selectors; together these keep order and meaning intact. Only comments are removed.

Does it turn colours into variables?

No. The code alone cannot tell which colour is a brand colour and which just happens to repeat, so that decision is left to you. You can spot repeated values in the output and move them into $ variables by hand.

Is my code sent anywhere?

No. The conversion runs entirely in your browser; the stylesheet you paste never reaches a server.