SCSS to SASS Converter

What the SCSS to SASS converter does

SCSS and the indented syntax are two ways of writing the same language, and Dart Sass compiles both. The old Ruby Sass tool sass-convert could translate between them while keeping variables and mixins, but it was retired together with Ruby Sass, and Dart Sass has no built-in replacement. This SCSS to SASS converter offers a practical alternative: it compiles your SCSS with Dart Sass and prints the evaluated rules in indented syntax, re-nested by selector.

Example

$brand:#0f766e;
@mixin focus($c:$brand){outline:2px solid $c}
.btn{padding:8px 16px;&:focus-visible{@include focus}&--ghost{background:transparent;border:1px solid $brand}}

.btn
  padding: 8px 16px
  &:focus-visible
    outline: 2px solid #0f766e

.btn--ghost
  background: transparent
  border: 1px solid #0f766e

The mixin call became its declaration, and $brand became its value. The BEM modifier &--ghost compiled to the separate class .btn--ghost, so it is a separate top-level rule in the output; you can nest it again as &--ghost under .btn.

Keeping variables and mixins

If you want the indented file to keep its Sass logic, translate the definitions by hand; the syntax changes are mechanical:

• Remove braces and semicolons, and indent the contents of each block.
• @mixin name can stay, or be shortened to =name; @include name can become +name.
• Variables, maps, @use, @each and functions are written the same way, without the braces.
• Multi-line selector lists must end each line with a comma.

Then paste the evaluated rules from this converter below your definitions and substitute variables back where they belong.

Checks after converting

• Only 2-space indentation is used; keep it consistent when editing.
• Block comments are joined onto one line; // comments from the SCSS are dropped during compilation.
• Partials loaded with @use must be pasted into the input.

Which syntax should you use?

Functionally there is no difference; choose by readability and tooling. The indented syntax is shorter and enforces consistent indentation. SCSS is more familiar to anyone who knows CSS, accepts copied CSS unchanged, and is supported by Prettier and most editor extensions, while Prettier does not format .sass files. Many teams keep SCSS for application code and use neither exclusively for legacy files.

Verify the result with the SASS Compiler. For the opposite direction, use SASS to SCSS. Conversion runs locally in your browser.

Re-nesting the output

Because the rules are rebuilt from compiled selectors, BEM modifiers and element classes come out as separate top-level rules. Nesting them back under their block keeps the indented file close to the original structure:

.btn
  padding: 8px 16px
  &:focus-visible
    outline: 2px solid $brand
  &--ghost
    background: transparent
    border: 1px solid $brand

Compile the edited file with the SASS Compiler and compare its CSS with the output of your original SCSS. When both match, the port is complete.