SASS to SCSS Converter

Paste SASS indented code to convert it to SCSS brace syntax — curly braces and semicolons added, mixin shorthand expanded automatically.

Last updated: May 21, 2026

SASS Input

SCSS Output

$primary: #0f766e;
$spacing: 1rem;

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;

}
.card {
  background: white;
  padding: $spacing;

  &:hover {
    background: lighten($primary, 40%);

  }
  .title {
    color: $primary;
    font-size: 1.25rem;

  }
}
.hero {
  @include flex-center
  min-height: 100vh;
}

Converts SASS indented syntax to SCSS brace syntax. Adds braces and semicolons, converts = → @mixin and + → @include.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SASS to SCSS Converter?

SASS (indented syntax) uses indentation instead of braces and omits semicolons. SCSS uses the familiar CSS brace and semicolon style. Both compile to the same CSS output using the Sass preprocessor.

Converting from SASS to SCSS involves: detecting block boundaries from indentation and inserting matching `{}` braces, adding semicolons after declarations, converting `=name` to `@mixin name`, and converting `+name` to `@include name`.

How to Use SASS to SCSS Converter

Paste your SASS (indented) code into the input panel (or click Load Sample)

The converted SCSS output appears instantly in the right panel

Copy the output or download it as a .scss file

Common Use Cases

Developers migrating from SASS indented syntax to the more common SCSS syntax.
Teams adopting SCSS as the project standard from existing SASS codebases.
Developers who receive SASS files and need to integrate them into an SCSS project.

Example Input and Output

Convert a simple SASS component to SCSS brace syntax.

SASS input

.card
  background: white
  +flex-center

SCSS output

.card {
  background: white;
  @include flex-center;
}

Privacy

All conversion happens in your browser. No code is sent to any server.

Frequently Asked Questions

What is the difference between SASS and SCSS?

SASS (indented syntax, .sass extension) uses indentation for nesting and omits braces and semicolons. SCSS (.scss extension) uses curly braces and semicolons like standard CSS. SCSS is the more popular syntax today because it's a superset of CSS.

Does this handle deeply nested structures?

Yes. The converter tracks indentation levels and adds matching braces at the correct depth. Complex nesting and the & parent selector are handled correctly.

Related Tools

SCSS to SASS Converter

Convert SCSS brace syntax to SASS indented syntax. Removes braces and semicolons, converts @mixin/@include to = and + shorthand.

SCSS to LESS Converter

Convert SCSS code to LESS syntax. Maps $variables to @variables, @mixin/@include to .mixin() syntax, and @extend to &:extend().

SCSS Beautifier

Format and beautify SCSS stylesheets online. Fixes indentation, normalizes spacing, and handles nested rules, $variables, @mixins, and @include directives.

CSS to SCSS Converter

Convert plain CSS into cleaner SCSS with optional selector nesting, Sass variables, formatting, copy, and download output.

SCSS to Stylus Converter

Convert SCSS code to Stylus indented syntax. Removes braces and semicolons, converts $variables to bare assignments, @mixin/@include to function syntax.

Base64 Encoder/Decoder

Encode text to Base64 or decode Base64 to plain text — with URL-safe mode, auto-detect, and size stats.