Sass Compiler

Sass Compiler – Indented Sass to CSS

This page compiles the indented Sass syntax – the original, brace-free form of Sass used in .sass files – into regular CSS. It runs Dart Sass, the official implementation, inside your browser, so no installation and no upload is needed.

The indented syntax at a glance

$primary: #d10505

=rounded($r: 8px)
  border-radius: $r

.card
  padding: 16px
  +rounded
  &:hover
    color: $primary

• Indentation replaces braces: everything indented below a selector belongs to it.
• New lines replace semicolons; each declaration sits on its own line.
• = defines a mixin and + includes it – shorthands for @mixin and @include, which also work.
• Variables, nesting, @extend, @if, @each, @for, @function, and maps work exactly like in SCSS.

Multi-line selectors are allowed when a line ends with a comma, and comments use // for silent comments or /* for comments that stay in the CSS.

Common errors

Most problems with indented Sass are whitespace problems: mixing tabs and spaces, or indenting a declaration further than its siblings. The compiler reports the line and column of the issue. Remember that a property needs a colon (color: red), unlike Stylus.

Output options

Expanded gives one declaration per line, ideal for reading and debugging. Minified uses the compressed style for the smallest file. Both outputs can be copied or downloaded as a .css file, and the swap button sends the CSS back into the editor if you want to turn it into indented Sass again.

Moving between syntaxes

Most teams today use SCSS because any CSS file is already valid SCSS. Convert your files with Sass to SCSS, or translate them to other preprocessors with Sass to LESS and Sass to Stylus.