Does this accept the indented syntax?

Yes — that's the 'Sass' specifically. For SCSS input use SCSS-to-CSS. The two Sass-family syntaxes share semantics but differ in punctuation.

Line comments (//) are stripped when targeting CSS (they're Sass-only). Block comments (/* */) are preserved.

Will control flow (@if, @each) work?

Yes — @if/@else, @each, @for, @while all evaluate to their resulting CSS at compile time.

Yes — the output is standard CSS. Feed it into any PostCSS pipeline for further processing.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

$primary: #3b82f6
$radius: 0.5rem

.btn
  padding: 0.5rem 1rem
  border-radius: $radius
  background: $primary
  color: white

Output

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #3b82f6;
  color: white;
}

Convert SASS to standard CSS. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Hampton Catlin proposed Sass in 2006, making it the first CSS preprocessor ever created.
Sass introduced the concept of CSS nesting 18 years before CSS Nesting became a native browser feature in 2023.
The indented Sass syntax has fewer characters per line than SCSS, averaging 30% fewer keystrokes for equivalent code.

Does this accept the indented syntax?: Yes — that's the 'Sass' specifically. For SCSS input use SCSS-to-CSS. The two Sass-family syntaxes share semantics but differ in punctuation.
What about comments?: Line comments (//) are stripped when targeting CSS (they're Sass-only). Block comments (/* */) are preserved.
Will control flow (@if, @each) work?: Yes — @if/@else, @each, @for, @while all evaluate to their resulting CSS at compile time.
Can I use this output with PostCSS plugins?: Yes — the output is standard CSS. Feed it into any PostCSS pipeline for further processing.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

$primary: #3b82f6
$radius: 0.5rem

.btn
  padding: 0.5rem 1rem
  border-radius: $radius
  background: $primary
  color: white

Output

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #3b82f6;
  color: white;
}

Convert SASS to standard CSS. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Hampton Catlin proposed Sass in 2006, making it the first CSS preprocessor ever created.
Sass introduced the concept of CSS nesting 18 years before CSS Nesting became a native browser feature in 2023.
The indented Sass syntax has fewer characters per line than SCSS, averaging 30% fewer keystrokes for equivalent code.

Does this accept the indented syntax?: Yes — that's the 'Sass' specifically. For SCSS input use SCSS-to-CSS. The two Sass-family syntaxes share semantics but differ in punctuation.
What about comments?: Line comments (//) are stripped when targeting CSS (they're Sass-only). Block comments (/* */) are preserved.
Will control flow (@if, @each) work?: Yes — @if/@else, @each, @for, @while all evaluate to their resulting CSS at compile time.
Can I use this output with PostCSS plugins?: Yes — the output is standard CSS. Feed it into any PostCSS pipeline for further processing.