CSS to SCSS Converter

How the CSS to SCSS converter works

SCSS is a superset of CSS, so you could simply rename styles.css to styles.scss. What you would not get is the structure that makes Sass pleasant to maintain. This CSS to SCSS converter parses the stylesheet and nests rules under their shared parent selector: descendants become nested blocks, pseudo-classes become &:hover-style references, and child combinators are kept as > .child. Values are not touched.

Example

.nav{display:flex}.nav ul{margin:0;list-style:none}.nav ul li{display:inline-block}.nav a{color:#333}.nav a:hover{color:#0f766e}.nav > .logo{height:32px}@media (max-width:600px){.nav{flex-direction:column}.nav a{padding:8px}}

.nav {
  display: flex;
  ul {
    margin: 0;
    list-style: none;
    li {
      display: inline-block;
    }
  }
  a {
    color: #333;
    &:hover {
      color: #0f766e;
    }
  }
  > .logo {
    height: 32px;
  }
}

@media (max-width:600px) {
  .nav {
    flex-direction: column;
    a {
      padding: 8px;
    }
  }
}

Seven flat rules became one tree that mirrors the HTML structure. The rules inside the media query were nested the same way within the @media block.

Next steps in Sass

• Variables: pull repeated values into $brand: #0f766e; and keep them in a partial like _variables.scss, loaded with @use.
• Media queries inside rules: Sass lets you write @media inside .nav, which keeps a component's responsive rules in one place. Move them manually if you like that style.
• Mixins for repeated groups, such as focus rings or truncation, with @mixin and @include.
• BEM names: .card__title can be written as &__title inside .card. The converter does not do this automatically, because in CSS these are unrelated class names.

Splitting the result into partials

A converted stylesheet is a good moment to reorganize. Sass partials are files whose names start with an underscore, such as _nav.scss or _buttons.scss; they are never compiled on their own. Move each top-level block into a partial that matches a component, keep shared values in _tokens.scss, and load everything from one entry file with @use "nav"; lines. The Sass module system then makes each partial's variables and mixins available only where you @use them, which avoids the global naming clashes of the older @import.

Check before you commit

• Deep nesting reproduces the specificity of the original selectors exactly. If your CSS had long selector chains, the SCSS will be deeply nested; consider flattening.
• Selector lists (h1, h2) and selectors that already contain & stay as single rules.
• Compile the result with the SCSS Compiler and compare it with the original to confirm nothing changed.

If you prefer the indented syntax, use CSS to SASS. To format hand-edited SCSS consistently, use the SCSS Formatter. Everything runs in your browser.