CSS to SCSS Converter
Convert flat CSS into nested SCSS with selector merging and optional color variables. Copy or download in your browser. Free and private.
Loading tool...
What is CSS to SCSS Converter?
The CSS to SCSS Converter is a free browser tool that turns flat CSS rules into nested SCSS with selector merging and optional color variables.
Key Benefits
- Rewrite long selector lists into nested Sass without leaving the tab
- Keep hover and descendant relationships visible in one block
- Extract repeated colors as reusable variables
- Stay private: styles never leave the browser
Common Use Cases
- •Migrating a legacy stylesheet toward Sass partials
- •Cleaning duplicated .card selectors before a refactor
- •Teaching how CSS nesting maps onto SCSS ampersand syntax
- •Preparing a snippet to paste into an existing .scss file
How to Use the CSS to SCSS Converter
- Paste CSS: Paste a stylesheet or load the sample. Rules can be flat or already nested.
- Choose options: Turn on color variable extraction to reuse repeated colors, and BEM nesting if you want .card-title under .card.
- Review nested SCSS: Check that descendants, hover states, and @media blocks look like the Sass you expect. Unbalanced braces show a warning.
- Copy or download: Copy the SCSS to the clipboard or download styles.scss. Nothing is uploaded.
Key Features
- Nest descendants, combinators, and pseudo-classes under shared parents
- Optional BEM ampersand suffixes such as &-title
- Extract repeated hex, rgb, and hsl colors as $color-* variables
- Keep @media, @supports, @import, and @font-face intact
- Copy or download a .scss file without uploading CSS
Frequently Asked Questions
Does this compile SCSS back to CSS?
No. It only nests flat CSS into SCSS syntax. You still compile the result with Sass, Dart Sass, or your bundler.
How are selectors merged?
Shared prefixes become parent blocks. .card h2 nests as h2 inside .card, and .card:hover becomes &:hover. Unrelated names such as .cardboard stay separate unless BEM nesting is on.
What does color variable extraction do?
Hex and functional colors that appear at least twice are declared once as $color-* at the top and reused in declarations. Unique colors stay inline.
Is my CSS uploaded?
No. Parsing and nesting run in your browser with JavaScript. You can use the tool offline after the page loads.