CSS to SASS

Convert flat CSS into nested SCSS, live as you type.

100% private, runs in your browser

CSS

SCSS

.card {
  padding: 1rem;
  .title {
    font-size: 1.25rem;
  }
  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

Groups rules sharing a base selector into nested SCSS, live as you type — handles plain selectors and descendant/pseudo-class combinators. It doesn't understand @media/@supports blocks, comments, or comma-separated selector lists, which are left untouched. Runs entirely in your browser.

What is CSS to SASS?

Paste flat CSS and this tool groups rules that share a base selector into nested SCSS — turning `.card` and `.card .title` into `.card { .title { ... } }` — live as you type.

FAQ

Plain selectors and descendant/pseudo-class combinators nest correctly. @media/@supports blocks, comments, and comma-separated selector lists are left untouched at the top level rather than risking an incorrect conversion.

Yes, the nested output is standard SCSS that any Sass compiler accepts.