SCSS to SASS
Turn brace-and-semicolon SCSS into the cleaner indentation-based SASS syntax right in your browser.
Example
SCSS input:
.card {
color: $primary;
.title { font-weight: bold; }
}SASS output:
.card
color: $primary
.title
font-weight: bold
How it works
It tokenizes SCSS by braces and semicolons, then re-emits each rule and declaration as indented SASS lines without braces or trailing semicolons. It is a syntactic transform, so verify edge cases like multiline expressions and inline comments.
Good to know
This tool rewrites SCSS (the brace-and-semicolon Sass syntax) into the older indentation-based SASS syntax, doing the conversion entirely in your browser. It strips the curly braces and trailing semicolons, re-indents each nested selector and declaration by two spaces, and preserves both line and block comments. It is aimed at developers who have inherited or prefer the indented .sass style, or who are standardizing a codebase on one syntax.
Reach for it when you need a quick first pass at flipping a stylesheet's syntax without spinning up a local build or installing a converter. Typical cases: migrating a few partials to match a project that uses indented SASS, cleaning up snippets pasted from documentation, or comparing how the same rules read in each style. Because it is purely syntactic, it never touches the meaning of your code, so variables, mixins, and selectors come through unchanged.
Read the output as a one-to-one structural translation, not a compiled result. Each opening brace becomes an indent level and each closing brace removes one, so correctly nested input produces correctly nested output. Watch the status line below the panes: it reports success, and if it detects an unequal number of opening and closing braces it warns that nesting may be off, which usually points to a problem in the source rather than the conversion.
One practical caveat: this is a token-by-token transform, not a real Sass parser, so anything that spreads across lines or hides syntax inside strings and interpolation can throw off the indentation. Multiline maps, expressions broken over several lines, and one-liner nested blocks (where a selector and its declaration share a line) are the usual trouble spots. Always diff the result and run it through your actual Sass build before committing.
Frequently asked questions
Does this run a real SASS compiler?
No. There is no reliable SASS/SCSS converter that runs in the browser, so this is a best-effort syntactic transform: it removes braces and semicolons and re-indents nesting. It does not evaluate variables, mixins, or @import resolution.
What SCSS edge cases may not convert cleanly?
Multiline expressions, maps spanning several lines, semicolons inside complex interpolations, and unusual comment placement can produce imperfect indentation. Always review the output and test it with your build before committing.
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 SCSS and SASS syntax?
They are two syntaxes for the same Sass language. SCSS uses braces and semicolons and is a superset of CSS, while the older SASS (indented) syntax drops braces and semicolons and relies on indentation and newlines to define structure.
Is SASS indented syntax still supported?
Yes. Both the SCSS and the indented SASS syntaxes remain fully supported by the Sass compiler, and either compiles to the same CSS. SCSS is the more widely used default today, but indented files with the .sass extension still work.
Do I need to change my file extension when converting SCSS to SASS?
Yes. The indented syntax uses the .sass extension while the brace syntax uses .scss. After converting, save the result with a .sass extension so the compiler parses it with the correct syntax.
Does converting SCSS to SASS change how my styles compile?
No. The two syntaxes are equivalent and produce identical CSS, so a correct conversion does not change the compiled output. Differences only appear if the syntactic transform mis-indents something, which is why you should verify with a build.
Can I convert SASS back to SCSS?
Yes. The conversion is reversible since both syntaxes express the same language, and CalcCafe also offers a separate SASS to SCSS tool that adds braces and semicolons back.
Why does my converted SASS have incorrect indentation?
Indentation usually breaks on constructs a token-based transform cannot fully resolve, such as multiline expressions, maps spanning several lines, or selectors and declarations written on the same line. Reformatting those onto separate lines in the source often fixes the result.
Will this tool resolve my variables, mixins, or imports?
No. It only rewrites syntax; it does not evaluate variables, expand mixins, or resolve @import or @use statements. Those are handled by the Sass compiler, not by a syntax converter.
Is it safe to paste proprietary stylesheets into this converter?
The tool runs entirely client-side, so your input stays on your device and is never uploaded to a server. It also continues to work offline once the page has loaded.
Related tools