Sass to SCSS

Sass to SCSS Converter

Have an older project written in the indented .sass syntax? Convert it to SCSS, the syntax used by Bootstrap, most tutorials, and the majority of Sass projects today. Both syntaxes describe the same language, so the conversion is exact: the CSS compiled from your Sass and from the generated SCSS is identical.

What is converted

• Indentation → braces: every nested level becomes a { } block.
• Line breaks → semicolons: each declaration and statement ends with ;.
• =mixin → @mixin, +mixin → @include (with or without arguments and content blocks).
• Multi-line selectors ending with a comma are joined into one selector list.
• Comments: // comments stay; indented /* comments, which continue on deeper-indented lines without a closing */, become regular closed block comments.

Variables, !default, maps, @extend, placeholders, control flow, functions, and module imports need no change because both syntaxes share them.

Example

$c: red
=m($x)
  color: $x
.a,
.b
  +m($c)

$c: red;

@mixin m($x) {
  color: $x;
}

.a, .b {
  @include m($c);
}

Why switch to SCSS?

SCSS accepts plain CSS, so you can paste snippets from documentation, browser dev tools, and design tools without rewriting them. Editors, linters such as Stylelint, and formatters such as Prettier also have the best support for SCSS.

After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact. Compile the result with the SCSS Compiler, or format it further with the SCSS Beautifier. After converting, rename the file from .sass to .scss; imports and @use rules do not need the extension, so other files keep working without changes.