SASS to CSS Compiler Online — Free Tool

Convert indented Sass (.sass) to flat, browser-ready CSS — no Dart Sass install, no build pipeline. Runs entirely in your browser.

Input SASS (indented)

Compiled CSS

What is a SASS to CSS compiler?

A SASS to CSS compiler reads the original indented Sass syntax — files ending in .sass — and emits standard CSS. The indented syntax expresses nesting through indentation alone, with no braces and no semicolons; the compiler reverses that, inserting braces around nested blocks and ending each property with a semicolon to produce a stylesheet a browser can render directly.

Indented Sass predates SCSS by several years and is still used in legacy codebases, Ruby-on-Rails projects, and some long-running design systems. The OpenFormatter compiler runs in JavaScript on your machine, so you can preview an inherited .sass file or extract plain CSS without installing dart-sass or configuring a build pipeline.

How to compile SASS to CSS — 4 steps

Paste your .sass source. Indented rules, no braces, no semicolons. Click Load Sample for a navigation example.
Click Convert. The compiler walks the indentation tree and emits brace-and-semicolon CSS in your browser.
Inspect the output. Flat CSS with proper syntax appears in the Output panel. Errors surface inline if indentation is inconsistent.
Copy and use. Drop the result into a .css file, a <style> tag, or a CMS theme editor — no build pipeline required.

Indented .sass in, flat CSS out — example

.sass source (indented)

.nav
  display: flex
  gap: 16px

  .item
    color: #374151

    &:hover
      color: #2563eb

Compiled CSS

.nav {
  display: flex;
  gap: 16px;
}

.nav .item {
  color: #374151;
}

.nav .item:hover {
  color: #2563eb;
}

Indentation-Aware Parsing

The compiler tracks indent depth on every line, treating deeper indentation as a nested rule and dedenting to close blocks automatically.

Braces & Semicolons Inserted

Open braces appear on the parent rule line, properties terminate with semicolons, and matching close braces are emitted on dedent.

Client-Side Only

Indented Sass is parsed in JavaScript inside your browser. Internal stylesheets, design tokens, and proprietary mixins never leave your device.

Common use cases

check_circleMaintaining a legacy Ruby on Rails project that ships indented .sass assets
check_circlePreviewing an inherited .sass file without installing dart-sass or a build watcher
check_circleExtracting plain CSS from indented Sass for a CMS that does not support preprocessors
check_circleCompiling indented .sass for a one-off email template or marketing landing page
check_circleReading old documentation snippets written in indented Sass and converting them to CSS
check_circleProducing a CSS-only baseline before migrating a .sass codebase to SCSS
check_circleSharing a compiled CSS preview with a designer who does not run any Sass tooling
check_circleDropping the compiled output into Codepen, JSFiddle, or a static-site demo

Indented Sass vs SCSS vs CSS

All three describe styles for a browser, but only CSS is what the browser actually parses. Indented Sass (.sass) uses indentation alone — no braces, no semicolons — and was the original Sass dialect. SCSS (.scss) layers Sass features on top of CSS-like brace syntax and is the dominant choice today. CSS is what both compile to. This converter targets indented Sass specifically — for SCSS use the SCSS to CSS compiler instead. Choose between the two based on the file extension you have, not the features you need: both share the same Sass feature set under the hood.

Switch syntaxes or modernise the source?

Move .sass to .scss, target SCSS directly, or convert in the other direction — all browser-side.

CSS to SASS SASS to SCSS SCSS to CSS

Frequently Asked Questions

What is the indented Sass syntax?

Indented Sass — files with the .sass extension — is the original Sass syntax. It uses indentation alone to express nesting; there are no braces, no semicolons, and a newline ends every declaration. It predates SCSS, which Sass introduced later as a CSS-superset alternative. Both compile to identical CSS, but most projects in 2025 prefer SCSS for its CSS-like familiarity.

How is .sass different from .scss?

Syntax only. .sass uses Python-like indentation: a child rule lives at a deeper indentation level than its parent, and properties end at a newline. .scss uses CSS-like braces and semicolons. Variables, mixins, functions, and the rest of the feature set are identical. The Dart Sass compiler reads both and emits the same CSS.

Why would I compile .sass to CSS in the browser?

To preview an indented-syntax snippet without installing dart-sass, configuring webpack, or setting up a build watcher — useful when reading legacy documentation, debugging an inherited stylesheet, or extracting plain CSS for a one-off email template. The compiler runs in JavaScript on your machine, so internal styles stay private.

How does the compiler handle inconsistent indentation?

The Sass spec requires consistent indentation throughout a file — pick 2 spaces, 4 spaces, or tabs and stick to it. The compiler treats each increase in indent as a deeper nesting level. Mixed tabs and spaces produce ambiguous output; clean up indentation in your editor before running the converter for predictable results.

Does it support indented-syntax @import and @use?

External imports and @use require a real file system to resolve module paths, so they are not supported in the browser. Inline .sass — variables, mixins, nested rules — compiles correctly. For full @import / @use resolution use the dart-sass CLI: sass --indented input.sass output.css.

Are tabs or spaces preferred in indented Sass?

Either works, but they cannot be mixed within a file. Most .sass codebases use 2 spaces, matching the dominant SCSS convention. If you inherit a file with tabs, keep the tabs throughout that file rather than mixing styles. Editors with EditorConfig support enforce consistency automatically.

Is my .sass uploaded to your servers?

No. Compilation runs entirely in your browser using JavaScript. .sass containing internal design tokens, brand colours, or licensed component code never leaves the device. Verify in DevTools → Network — no requests fire when you click Convert.

Should I still write new code in indented Sass?

Generally no — SCSS is the dominant Sass dialect in 2025, with broader tooling support, more familiar syntax for CSS authors, and clearer error messages on syntax mistakes. Use indented .sass when maintaining a legacy codebase that already uses it; for new files, prefer SCSS or native CSS variables with CSS Nesting.