SCSS to SASS Converter Online

Strip braces and semicolons from SCSS to produce the indented SASS syntax — same Sass language, different look. 100% in your browser.

Input SCSS

SASS Output

What is an SCSS to SASS Converter?

An SCSS to SASS converter rewrites the brace-and-semicolon SCSS syntax into the indented SASS syntax — both flavours of the same Sass language. The converter strips every { and }, drops the trailing semicolons, and indents each block to express structure with whitespace. Variables ($name), nested rules, and the & parent reference work identically in both syntaxes.

Use this when your team prefers indented Sass for terseness, when porting from a project that standardised on SCSS, or when you simply want to compare the two syntaxes side by side.

How to convert SCSS to SASS — 4 steps

Paste your SCSS. Drop a .scss file into the Input panel, or click Load Sample.
Click Convert. Braces are stripped, semicolons are removed, and 2-space indentation is generated for the .sass syntax.
Review the SASS. Confirm $variables, nested rules, and pseudo-classes look right. Multi-line values may need a quick re-flow.
Save as .sass. Use the .sass extension (not .scss) and compile with sass input.sass output.css.

Sample SCSS in, SASS out

Input — SCSS

$primary: #66ccff;
$padding: 12px;

.nav {
  display: flex;
  align-items: center;
  padding: $padding 24px;
  background: #1a1a1a;

  a {
    color: #fff;
    margin-right: 16px;

    &:hover {
      color: $primary;
    }
  }
}

Output — SASS (indented)

$primary: #66ccff
$padding: 12px

.nav
  display: flex
  align-items: center
  padding: $padding 24px
  background: #1a1a1a
  a
    color: #fff
    margin-right: 16px
    &:hover
      color: $primary

Brace-Free Output

Every { and } is stripped. The .sass output relies on indentation alone — same Sass language, half the punctuation.

Same Sass Language

$variables, @mixin, @include, and the & reference work identically. Only the syntax shell changes.

Client-Side Only

Translation runs in JavaScript inside your browser. .scss source never leaves your machine.

Common use cases

check_circleStandardising a Sass codebase on the indented SASS syntax for terseness
check_circlePorting third-party SCSS partials into a project that uses .sass throughout
check_circleComparing SCSS vs indented SASS readability on a real component
check_circleProducing SASS examples from existing SCSS documentation
check_circleMigrating a codebase that prefers Pug-style indentation away from braces
check_circleBootstrapping a SASS-based design system from existing SCSS source
check_circleQuick syntax conversion without installing the sass-convert CLI
check_circleVisualising what SCSS would look like in indented form

SCSS vs SASS — same engine, different look

SCSS keeps braces and semicolons, making it instantly readable to any CSS developer and easier to copy-paste from CSS examples. SASS drops both, relying on indentation — fewer keystrokes, cleaner visuals, but a slight learning curve for whitespace-significant syntax. Both compile with the same Dart Sass binary, share $variables, @mixin, @include, and the & reference. The choice is purely aesthetic. If you find indented SASS too far, see SCSS to CSS instead.

Need to go further?

Convert between every CSS preprocessor — all browser-side.

SCSS to Stylus SCSS to CSS SASS to CSS

Frequently Asked Questions

What is the difference between SCSS and SASS?

They are two syntaxes for the same Sass language. SCSS (.scss) uses braces and semicolons — it is a strict superset of CSS. SASS (.sass), the original syntax, uses indentation instead of braces and skips semicolons. Both compile with the same Dart Sass binary; you choose by file extension. Variables, mixins, and nesting work identically in both.

Can I convert losslessly between SCSS and SASS?

Yes — they map one-to-one. The Sass team even ships a built-in converter (sass-convert) that handles edge cases. This browser version covers the 95% case (variables, nested rules, declarations, & references) and avoids the Node install. Multi-line declarations and inline @if blocks may need a quick visual check after conversion.

Why prefer indented SASS over SCSS?

Indented SASS is more concise — fewer keystrokes, less visual clutter. Some teams find it cleaner once they get used to whitespace-significant syntax. Others find SCSS easier because it stays compatible with copy-pasted CSS. Pick SASS for terseness; pick SCSS for CSS familiarity.

Will the SASS output compile with Dart Sass?

Yes. Save with a .sass extension (not .scss) and run sass input.sass output.css. Dart Sass autodetects the indented syntax from the file extension. sass-loader and Vite plugins do the same.

Are SCSS @mixin and @include translated correctly?

In SASS the syntax also supports @mixin / @include but additionally allows the shorthand =mixin-name and +mixin-name. The converter keeps the @mixin form (which works in both syntaxes) and only handles brace stripping. Convert =/+ shorthand manually if your style guide prefers it.

Does the converter handle multi-line CSS values?

SCSS allows multi-line values (e.g. for long box-shadow lists or grid-template). The brace-stripping pass collapses them to single lines per declaration. After conversion, manually re-flow multi-line values with Sass continuation backslashes if needed.

What about @if / @each / @for blocks?

These at-rule control structures translate to indent-based form: @if condition with the body indented underneath, no braces. The converter follows the same rules as for selector blocks. @else may need a quick visual check after conversion.

Is my source uploaded?

No. Conversion runs entirely in your browser as JavaScript. Your .scss source never leaves the device. Verify in DevTools — the Network tab stays empty when you click Convert.