SCSS to CSS Converter
Flatten nested SCSS selectors into plain CSS, live as you type.
.card .title {
font-size: 1.25rem;
}
.card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card {
padding: 1rem;
}Flattens nested SCSS selectors into plain CSS, live as you type — handles plain selectors and &/descendant nesting only, not variables, mixins, or @media/@supports blocks. Runs entirely in your browser.
Need the opposite? CSS to SASS
What is SCSS to CSS Converter?
Paste nested SCSS and get flat, plain CSS instantly, turning `.card { .title { } }` into `.card .title { }`. Handles selector nesting (including `&` for compound selectors like `&:hover`), which is the core SCSS feature that plain CSS can't express.
How to Use SCSS to CSS
- 1
Paste the Nested SCSS: Enter SCSS with nested selectors, including & for compound selectors.
- 2
Read the Flattened Result Instantly: The plain CSS output appears automatically as you type.
- 3
Copy the Result: Use the copy button to copy the flattened CSS.
How It Works
Nested SCSS rule blocks are parsed and each selector is flattened by joining it with its ancestor selectors. A descendant selector gets a space (`.card .title`), while `&` is joined directly with no space so it can express compound selectors and pseudo-classes (`.card:hover`) correctly.
Example
.card {
color: black;
.title {
font-weight: bold;
}
&:hover {
color: blue;
}
}.card .title {
font-weight: bold;
}
.card:hover {
color: blue;
}
.card {
color: black;
}The nested `.title` block flattens into `.card .title`, and `&:hover` joins directly onto `.card` with no space.
Common Use Cases
Converting a small nested SCSS snippet to plain CSS for a place that has no Sass build step: an inline `<style>` block, a CMS's custom-CSS field, or a quick one-off page where pulling in a full Sass compiler isn't worth it.
Frequently Asked Questions
Common questions about SCSS to CSS Converter.