SCSS to SASS Converter

Paste SCSS code to convert it to SASS indented syntax — braces and semicolons removed, mixin syntax updated automatically.

Last updated: May 21, 2026

SCSS Input

SASS Output

$primary: #0f766e
$spacing: 1rem

=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
  +flex-center
  min-height: 100vh

Converts SCSS brace syntax to SASS indented syntax. Removes 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 SCSS to SASS Converter?

SCSS and SASS are two syntaxes for the same Sass preprocessor. SCSS uses curly braces and semicolons like CSS, while SASS uses indentation and omits braces and semicolons entirely. The two syntaxes are semantically identical — the same features are available in both.

Converting from SCSS to SASS involves: removing curly braces `{}`, removing semicolons `;`, converting `@mixin name` to `=name`, and converting `@include name` to `+name`. Variables (`$var`) are identical in both syntaxes.

How to Use SCSS to SASS Converter

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

The converted SASS output appears instantly in the right panel

Copy the output or download it as a .sass file

Common Use Cases

Developers migrating a codebase from SCSS to the leaner SASS indented syntax.
Developers who prefer SASS indentation style and want to convert team SCSS files.
Learning the relationship between the two Sass syntax variants.

Example Input and Output

Convert a simple SCSS component to SASS indented syntax.

SCSS input

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

SASS output

.card
  background: white
  +flex-center

Privacy

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

Frequently Asked Questions

Are SCSS and SASS the same language?

Yes — both are syntaxes for the Sass preprocessor and compile to the same CSS output. SCSS was introduced to be more accessible to CSS developers (it's a strict superset of CSS), while SASS is the older, terser indented syntax.

Is the conversion lossless?

For standard SCSS patterns — variables, nesting, mixins, includes — the conversion is accurate. Complex multi-brace constructs or unusual formatting may need manual review.

Related Tools

SASS to SCSS Converter

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

SCSS to LESS Converter

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

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.

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.

Base64 Encoder/Decoder

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