SASS to SCSS Converter

What the SASS to SCSS converter does

Many teams move from the indented syntax to SCSS because SCSS accepts plain CSS, works with more editor tooling, and is what most documentation shows. The two syntaxes compile identically, so switching is purely about the source format and the people and tools that read it. This SASS to SCSS converter compiles your .sass code with Dart Sass, then prints the result as nested SCSS with braces and semicolons. Calculations and module functions are evaluated, so the output is ready to use as it is.

Example

@use 'sass:math'
$base: 16px

.article
  font-size: $base
  h2
    font-size: math.div($base * 3, 2)
    margin: 0 0 $base * .5
  p + p
    margin-top: $base

.article {
  font-size: 16px;
  h2 {
    font-size: 24px;
    margin: 0 0 8px;
  }
  p + p {
    margin-top: 16px;
  }
}

math.div($base * 3, 2) became 24px, and the adjacent-sibling selector p + p stayed nested under .article.

Manual conversion without evaluating

If you would rather keep variables, mixins and loops, the syntax translation from indented Sass to SCSS is mechanical, and you can do it by hand for small files:

1. Add { after every selector and control directive, and } where indentation decreases.
2. Add ; after every declaration, variable, @use, @include and @extend.
3. Replace the shorthand =name with @mixin name and +name with @include name.
4. Join selector lists that continue over several lines, or keep them with commas at line ends.

Use this converter's output as a reference to check that your hand-converted file compiles to the same CSS.

Limitations

• Evaluated output: variables, mixins and loops are replaced by their results.
• Partials loaded with @use or @import must be pasted in.
• // comments disappear during compilation; /* */ comments are kept.

Tooling after the switch

One practical reason to move to SCSS is tooling. Prettier formats SCSS but not the indented syntax, Stylelint's standard SCSS configurations target the brace syntax, and most editor extensions and online examples assume SCSS. Converting also lets you paste CSS from browser developer tools or documentation straight into your stylesheets, since any valid CSS is valid SCSS. Code review also tends to be easier, because reviewers see the same brace structure they know from plain CSS and from most online examples.

Compile the SCSS with the SCSS Compiler to verify it, or format it with the SCSS Formatter. Conversion runs in your browser.