About the SASS to SCSS Converter
These are two spellings of one language, so this conversion is purely mechanical and nothing about the meaning of your styles changes. Each indentation level becomes a brace pair, each declaration gains a trailing semicolon, and the nesting you already had is reproduced exactly. Variables, interpolation and function calls are identical in both dialects and pass through untouched.
Only the two shorthand forms need real work. The indented syntax offers =name for defining a mixin and +name for calling one, and neither is legal in SCSS. The converter expands them into @mixin name(...) and @include name(...), preserving parameter defaults and argument order. Everything written the long way in your source, such as an explicit @include, is already valid SCSS and is copied straight across.
The usual reason to make this move is tooling. SCSS is the dialect nearly every editor plugin, linter and formatter targets first, and it is far easier for someone who knows CSS but not Sass to read during code review. Silent comments starting with two slashes survive as they are, and loud /* */ comments keep their block form. If you are migrating a whole project, convert your partials before the file that imports them so a half converted tree never reaches the compiler. The SCSS Beautifier will then tidy the spacing to your house style.
How to use
- Paste the .sass source into the left pane, keeping its original indentation intact.
- Choose the indent width the SCSS output should use.
- Convert, then rename the file from .sass to .scss so your build picks the right parser.
- Update any @import or @use lines that referenced the old extension.
Common questions
- Do I have to change my build config after converting?
- Usually not. The Dart Sass compiler picks its parser from the file extension, so renaming the file is enough for most setups.
- Is one dialect faster to compile?
- No measurable difference. The parser front end differs but the rest of the pipeline is shared, so build times stay the same.
- What happens to =mixin and +include shorthands?
- They expand into the full @mixin and @include forms, since the compact spellings only exist in the indented syntax.
- Can I mix both dialects in one project?
- Yes. A .scss file can import a .sass partial and the reverse also works, which makes a gradual file by file migration safe.