SCSS to Sass

SCSS to Sass Converter

SCSS and the indented Sass syntax are two spellings of the same language, so this is the most precise conversion on FowTools: every feature has a direct counterpart, and the compiled CSS is identical.

What the converter changes

• Braces { } disappear; nesting is expressed with indentation.
• Semicolons disappear; each declaration ends at the line break.
• @mixin name($a) becomes =name($a) and @include name(1px) becomes +name(1px).
• Multi-selector lines such as .a, .b stay on one line.
• Block comments that span several lines are rewritten as // lines, which is how the indented syntax expects multi-line comments.

Everything else – variables, !default, maps, @use, @extend, placeholders, @if, @each, @for, @while, @function, @return, and @content – is copied as is, because both syntaxes use the same keywords.

Example

@mixin rounded($r: 8px) { border-radius: $r; }
.card { @include rounded; &:hover { color: red; } }

=rounded($r: 8px)
  border-radius: $r

.card
  +rounded

  &:hover
    color: red

When to use the indented syntax

Some teams prefer the indented syntax because it is shorter and enforces consistent indentation. It cannot contain plain CSS pasted from elsewhere without rewriting, which is why SCSS is more common. Empty rule blocks are skipped because the indented syntax has no way to write them.

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. Go the other way with Sass to SCSS, or compile with the Sass Compiler. Remember to rename converted files from .scss to .sass, because Dart Sass picks the syntax from the file extension; partials keep their leading underscore.