About the Sass (Indented Syntax) to CSS Compiler
The original Sass syntax uses indentation rather than braces and semicolons, with =name to define a mixin and +name to include it. It is less common than SCSS today but still used in older projects and by people who prefer its terseness. This tool compiles it with Dart Sass in indented mode, so everything the language supports is available.
Errors are reported with line and column, and indentation mistakes, the most common problem in this syntax, are called out by the compiler with a clear message. As with the SCSS compiler, external files cannot be imported; paste them inline.
To convert indented Sass to SCSS instead, compile to CSS here and then, if you want nesting back, run the result through CSS to SCSS.
How to use
- Paste indented Sass on the left. Use consistent indentation, spaces or tabs but not both.
- Choose the output style.
- Copy or download the CSS.
Common questions
- How is this different from the SCSS compiler?
- Only the input syntax. SCSS uses braces and semicolons; indented Sass uses indentation. Both compile with the same engine.
- Can I mix tabs and spaces?
- No. The indented syntax requires consistent indentation and the compiler will report a mismatch.
- Are @use and @import supported?
- Built-in modules yes; other files no, since there is no filesystem in the browser.