About the SASS Compiler
Files that end in .sass use the older indented dialect, where a newline replaces the semicolon and indentation replaces the braces. Mixins are declared with =name and called with +name, and @include is optional. The language underneath is identical to SCSS, so variables, nesting, control flow, functions and modules all behave the same way. This compiler feeds your source to Dart Sass in indented mode and hands back the CSS.
Indentation is load bearing here in a way it never is in SCSS, and it is the source of most failures. Mixing tabs and spaces inside one file, or dropping a nested rule back a level by accident, produces an error rather than a silently different stylesheet. When that happens the message names the line and column, and the highlight in the editor usually makes the problem obvious at a glance.
As with any in browser compiler, file imports have nowhere to resolve to, so paste the contents of any partial into the editor instead of referencing it. The built in sass: modules are bundled and load without a filesystem. Compressed style is available when you want to see the shipping size. If you are migrating a codebase away from the indented dialect, compile here and then feed the CSS to CSS to SCSS for a braced starting point.
How to use
- Paste indented Sass on the left, keeping the indentation consistent throughout the file.
- Pick expanded or compressed output.
- Copy the CSS, or press Swap to send it to the CSS to SASS converter and compare the round trip.
Common questions
- Can I mix tabs and spaces?
- No. Dart Sass requires one indentation character per file and reports an error as soon as the other one appears.
- Is =mixin the same as @mixin?
- Yes. In the indented syntax = declares a mixin and + includes one. The @mixin and @include spellings also work if you prefer them.
- How do I convert a .sass file to .scss?
- Compile it here, then convert the CSS with the CSS to SCSS tool. The sass-convert command line utility does a closer translation if you have it installed.
- Are one line nested rules allowed?
- No. The indented syntax needs a newline and deeper indentation for every nested block, which is the most common reason a pasted snippet fails.