CSS to SASS

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. Useful when migrating a plain-CSS codebase to Sass, or when pulling a stylesheet from somewhere that doesn't use SCSS and you want the nested structure as a starting point rather than retyping it by hand. Conversion happens entirely in your browser as you type; nothing is uploaded.

How to Use CSS to SASS

1. 1

   Paste the Flat CSS: Enter plain CSS with repeated selector prefixes, such as .card and .card .title.

2. 2

   Read the Nested Result Instantly: The nested SCSS appears automatically as you type.

3. 3

   Copy the Result: Use the copy button to copy the SCSS into your Sass project.

How It Works

Selectors are grouped by their base (the first compound selector before a descendant combinator). When one selector is a prefix of another, like `.card` and `.card .title`, the shorter one becomes the outer block and the rest of the longer selector becomes a nested child rule inside it, with the shared prefix removed. Selectors that don't share a base with anything else are left as flat, unnested rules. Comma-separated selector lists, @media/@supports blocks, and comments are passed through unchanged rather than guessed at.

Example

.card {
  padding: 16px;
}
.card .title {
  font-weight: bold;
}
.card .title:hover {
  color: blue;
}

.card {
  padding: 16px;
  .title {
    font-weight: bold;
  }
  .title:hover {
    color: blue;
  }
}

The shared `.card .title` prefix collapses into a nested block, and the `:hover` pseudo-class nests one level deeper using `&`.

Common Use Cases

• Migrating an existing plain-CSS project to Sass/SCSS without manually re-typing every nested relationship by hand.

• Turning a flat stylesheet extracted from a legacy site into a structured starting point for a component-based rewrite.