ZeroServer.tools

CSS to SCSS Converter

Convert flat CSS into nested SCSS syntax — groups related selectors under a single parent using & nesting.

Drop a .css file or click to browse

CSS input

Lines: 34Selectors: 7

SCSS output

.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .title {
    font-size: 18px;
    font-weight: 600;

    a {
      color: #111;
      text-decoration: none;

      &:hover {
        color: #2563eb;
      }
    }
  }
  .subtitle {
    color: #666;
  }
}

@media (max-width: 768px) {

  .card {
    padding: 8px;
  }

}

Lines: 35

How CSS to SCSS nesting works

The converter parses your CSS into individual rules, then groups selectors that share the same leading compound selector (the part before any combinator or pseudo-class) under one parent block. A selector like .card:hover becomes &:hover nested inside .card, and a descendant selector like .card .title nests .title one level deep — multi-level descendants (.card .title a) recurse to the correct depth automatically. Combinators (>, +, ~) are preserved with & (e.g. & > span). At-rules like @media keep their own nested scope, and comments are preserved in place.

This mirrors how you'd hand-nest a stylesheet when migrating to Sass — it does not invent variables or mixins, it only restructures selector nesting so the SCSS compiles to equivalent CSS. To go the other direction, or work with plain CSS, see CSS Formatter or CSS Minifier. To pull class names out of markup first, try the CSS Class Extractor.

Private & free — this tool runs entirely in your browser.