CSS to SCSS Converter

Convert flat CSS to nested SCSS with optional variable extraction and mixin detection.

CSS Input

Conversion Options

Nest selectorsExtract repeated colors as variablesExtract common patterns as mixins

Conversion Summary

CSS rules

SCSS blocks

size change

Converted SCSS

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card .title {
  font-size: 20px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.card .body {
  font-size: 14px;
  color: #86868b;
  line-height: 1.6;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card:hover .title {
  color: #0071e3;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS to SCSS Converter?

Convert plain CSS to SCSS format. Extracts variables for repeated values and groups rules into nested SCSS blocks.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS to SCSS Converter

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Paste your CSS

Paste the CSS you want to convert. Related selectors with the same prefix (e.g., .card and .card:hover) are automatically nested.

Review variable extraction

Repeated colour values and sizes are extracted to SCSS variables at the top of the output. Review and rename them as needed.

Copy the SCSS

Click Copy to get the SCSS output ready for a project using Sass.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

converted.scss

/* Input CSS */
/*
.card { border-radius: 12px; padding: 24px; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.card .card-title { color: #0071e3; font-size: 1.25rem; }
*/

/* Output SCSS */
$color-primary: #0071e3;

.card {
  border-radius: 12px;
  padding: 24px;

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .card-title {
    color: $color-primary;
    font-size: 1.25rem;
  }
}

Pro tips

Pro tips for better results

★

SCSS nesting improves organisation but increases specificity

Deeply nested SCSS compiles to highly specific selectors. .card .header .title { } becomes a three-level selector. Keep SCSS nesting to two levels maximum to avoid specificity problems.

FAQ

Frequently asked questions

The converter handles standard CSS properties, selectors, and at-rules. Media queries are preserved as top-level @media blocks. Complex attribute selectors and :is() chains have limited nesting detection.