CSS ⇄ SCSS / LESS Converter

Convert between plain CSS and SCSS/LESS: nest selectors, extract variables, or flatten back to CSS.

Conversion
Extract repeated colors / sizes into variables

Input

CSS

381 chars

Output

SCSS

34 lines

$size-1: 8px;
$color-1: #ffffff;
$color-2: #333333;
$color-3: #d7a756;

.card {
  padding: 16px;
  border-radius: $size-1;
  background: $color-1;
  .title {
    color: $color-2;
    font-size: 20px;
    span {
      color: $color-3;
    }
  }
  .body {
    color: $color-2;
    line-height: 1.5;
  }
}

.btn {
  padding: $size-1 16px;
  color: $color-1;
  background: $color-3;
  border: 1px solid $color-2;
}

@media (max-width: 600px) {
  .card {
    padding: $size-1;
  }
}

Tip: CSS → SCSS/LESS nests descendant selectors that share a common prefix (e.g. .card .title and .card .body nest under .card). SCSS/LESS → CSS flattens nested rules, resolves $/@ variables and & parent references, and bubbles nested @media blocks. This is a lightweight converter — Sass/Less function calls (e.g. darken()) are passed through unevaluated.