SASS to SCSS
Turn whitespace-indented SASS into SCSS by adding the braces and semicolons that SCSS requires.
Example
Indented SASS becomes brace-delimited SCSS:
$primary: blue
.box
color: $primary
&:hover
color: red
Output:
$primary: blue;
.box {
color: $primary;
&:hover {
color: red;
}
}How it works
Paste indented SASS; the tool tracks indentation depth to open and close blocks with braces and terminates statements with semicolons. It is a syntactic rewrite, not a full SASS compiler.
Good to know
This tool converts the older indentation-based SASS syntax (the .sass file format) into the brace-and-semicolon SCSS syntax (.scss). It reads the indentation depth of each line, opens a { when a block starts, closes it with } when the indent drops back, and appends a ; to property and statement lines. It is a text rewrite, not a compiler, so it never resolves variables, mixins, or functions and never produces plain CSS.
It is aimed at front-end developers and maintainers of older stylesheets who want to standardize on SCSS, which is now the more widely documented and tooling-supported Sass dialect. Typical moments to reach for it: migrating a legacy .sass codebase, copying a snippet from an old tutorial or Codepen that uses indented syntax, or normalizing a mix of .sass and .scss files in one project so a single linter and formatter can run across all of them.
Read the output as a starting draft, not a finished file. Each indentation level becomes one nesting level, so check that selectors like &:hover and nested classes landed at the depth you expect, and that the braces balance at the end. The tool deliberately leaves @include, @mixin, @if, and similar at-rules as statements rather than guessing whether they should open a block, which is where review pays off most.
A few practical caveats worth knowing:
- Use consistent indentation in the input. Mixed tabs and spaces, or uneven indent widths, can throw off the nesting since depth is measured purely by leading whitespace.
- Multi-line property values and complex control flow may not split or close cleanly, so paste the result into your editor or run it through the real Sass compiler to confirm it builds before committing.
Frequently asked questions
Does this fully compile SASS to CSS?
No. It only converts the indented .sass syntax into the .scss brace-and-semicolon syntax. It does not evaluate variables, mixins, or functions, and it does not output plain CSS.
Why might my output need manual fixing?
The converter is a line-based syntactic transform driven by indentation. Multi-line property values, inconsistent indentation (mixed tabs and spaces), and some complex @-rule control structures may not nest perfectly and should be reviewed.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between SASS and SCSS?
They are two syntaxes for the same Sass preprocessor. SASS uses indentation and newlines to define structure with no braces or semicolons, while SCSS uses curly braces and semicolons like standard CSS, which makes any valid CSS also valid SCSS.
Can I rename a .sass file to .scss without converting it?
No. The two formats are not interchangeable by extension alone; .sass relies on indentation while .scss requires braces and semicolons. You have to convert the actual syntax, which is what this tool does.
Is there an official command-line way to convert SASS to SCSS?
The legacy Ruby Sass gem included a sass-convert utility for switching between the indented and SCSS syntaxes. The current Dart Sass implementation does not ship sass-convert, so syntax conversion is typically done with separate tools or manual rewriting.
Will this tool change how my styles look in the browser?
It should not, because it only rewrites syntax rather than computing values. The converted SCSS represents the same rules; however, since the transform is best-effort, you should compile and compare the resulting CSS to confirm nothing shifted.
Does converting to SCSS keep my nesting and parent selectors?
Yes, nesting and the ampersand parent selector are preserved as nested blocks in the SCSS output. Confirm the nesting depth matches your original indentation, since the tool maps each indent level to one block.
Is SASS or SCSS more common today?
SCSS is the more widely used syntax in modern projects and is the default in most documentation and starter templates. The indented SASS syntax is still supported but appears mostly in older codebases.
Do I still need to compile the file after converting it to SCSS?
Yes. This tool only changes the syntax; it does not turn Sass into CSS. You still need a Sass compiler such as Dart Sass to process the SCSS into the final CSS the browser uses.
Related tools