Skip to content
ToolBay

CSS ↔ SCSS Online Free

New

Nest flat CSS into SCSS and flatten simple nested SCSS back to CSS (best-effort, no mixins).

  • Processed in your browser
  • Privacy-first
  • No account required
  • Nothing uploaded by default

Examples

CSS to SCSS

.card { color: teal; }
.card .title { font-size: 18px; }
.card {
  color: teal;
  & .title {
    font-size: 18px;
  }
}

How CSS ↔ SCSS works

Nest flat CSS into SCSS and flatten simple nested SCSS back to CSS (best-effort, no mixins). Runs locally in your browser.

  1. 1. Add input. Paste, type, or upload. Use a sample if you just want to see it work.
  2. 2. Run it. Processing happens in the browser.
  3. 3. Copy or download. Take the output and close the tab.
  • CSS to SCSS
Are mixins and variables supported?
No. This is a structural nest/flatten helper for plain selectors and declarations.

ToolBay does not store your input. Close the tab and it is gone. More design tools.

Related Tools