CSS to SASS Converter Online — Indented Syntax

Convert CSS to indented Sass syntax — no braces, no semicolons. The output compiles with Dart Sass to .sass files used in Rails, Middleman, and indented-syntax codebases. 100% in your browser.

Input CSS

SASS Output

What is a CSS to SASS Converter?

A CSS to SASS converter rewrites CSS into the original Sass indented syntax — the .sass format that uses indentation for nesting and drops braces and trailing semicolons entirely. The compiled output is identical to the source CSS, but the file becomes terser and unlocks Sass features like variables and mixins.

Two Sass syntaxes exist: SCSS (CSS-like, with braces) and SASS (indented, no braces). This converter targets the indented variant — the right choice for Rails apps with sass-rails, older Middleman sites, and any codebase already standardised on .sass files. The OpenFormatter converter runs entirely in your browser; no upload, no rate limit, no account.

How to convert CSS to SASS — 4 steps

Paste your CSS. Drop a stylesheet into the Input panel, or click Load Sample to try a button-component example.
Click Convert. Braces are removed, semicolons are stripped, and 2-space indentation is generated for the .sass syntax.
Review the SASS. Verify the indentation matches the original structure. The output is compile-ready for Dart Sass.
Save and compile. Save with a .sass extension and run sass input.sass output.css to confirm the compiled CSS is byte-identical.

Sample CSS in, indented SASS out

Input — CSS

.btn {
  background: #0066cc;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
}
.btn:hover {
  background: #0055aa;
}
.btn--danger {
  background: #cc0000;
}

Output — indented SASS

.btn
  background: #0066cc
  color: #fff
  padding: 8px 16px
  border-radius: 4px

.btn:hover
  background: #0055aa

.btn--danger
  background: #cc0000

Indented Syntax

Braces and trailing semicolons are stripped. Indentation defines block structure — the original Sass syntax, terser than SCSS.

Dart Sass Compatible

The .sass output compiles with the official Dart Sass implementation. The compiled CSS is byte-identical to the input.

Client-Side Only

Conversion runs in JavaScript inside your browser. Internal class names and proprietary styles never leave your device.

Common use cases

check_circleMigrating a CSS theme into a Rails sass-rails or Sprockets pipeline
check_circleConverting copied CSS to .sass files for a Middleman or Hugo Sass project
check_circleBootstrapping a SASS module from a legacy CSS component
check_circleTranslating CSS examples from documentation into your indented-syntax codebase
check_circleProducing .sass partials for design tokens and theme variants
check_circleRefactoring CSS into nestable indented structure before extracting $variables
check_circleMaintaining consistency in older sass-lang projects standardised on .sass
check_circleQuickly testing whether a Sass codebase prefers indented over SCSS syntax

SASS vs SCSS — picking the right syntax

The two Sass flavours compile to the same CSS but read very differently. SCSS uses CSS-style braces and semicolons — drop-in compatible with any existing CSS file and the dominant choice in modern React, Vue, and Angular projects. SASS uses indentation and drops braces — terser, faster to type, and the historical default for Ruby on Rails and Middleman. For a green-field project, choose SCSS unless you have a strong reason to pick indented. For maintaining existing .sass files, this converter gets you to the right syntax in seconds.

Need to go further?

Compile, format, or convert between every CSS preprocessor — all browser-side.

SASS to CSS CSS to SCSS CSS Beautifier

Frequently Asked Questions

What is the difference between SASS and SCSS syntax?

SASS — the original Sass — uses indentation for nesting and drops braces { } and trailing semicolons entirely. SCSS keeps the CSS-like braces and semicolons. Both languages share the same Sass features (variables, mixins, partials), but SASS files use the .sass extension and SCSS files use .scss. They are not interchangeable line-by-line: a .scss file will not parse as .sass.

Why would I choose indented SASS over SCSS?

Indented SASS is more concise — no braces, no semicolons, fewer keystrokes. Teams that come from a Python or YAML background tend to prefer it; teams used to JavaScript and CSS usually prefer SCSS. Functionally the two compile to the same CSS. Pick SASS only when an existing codebase or framework (older Rails apps, Middleman) already uses it.

How does indentation work in SASS?

Each level of nesting must be indented consistently — typically 2 spaces. Tabs and spaces cannot be mixed. A property belongs to a selector if it is indented one level deeper. Children of a nested selector indent one level beyond their parent. The Sass compiler will error on inconsistent indentation, similar to Python.

Is the converted .sass file compile-compatible with Dart Sass?

Yes. The output uses the standard indented syntax that Dart Sass — the official, actively-maintained Sass implementation — accepts. Run sass input.sass output.css with no flags. The compiled CSS is identical to the original input.

Does the converter add $variables or @mixin statements?

No — the converter handles syntax translation only. Detecting which colour, size, or radius values should become $variables requires human judgment. Convert first, then refactor by hand: extract repeated values, name them, and re-run the SASS to CSS compiler to verify nothing changed.

Can I convert SASS back to CSS or SCSS?

Yes. Use sass input.sass output.css with Dart Sass for the CSS direction, or use the SASS to SCSS converter on this site. The Sass language has full bidirectional conversion between the two syntaxes — they are different surface representations of the same AST.

What about pseudo-classes and @media queries?

Pseudo-classes like :hover and ::before are kept on their owning selector — they appear on the same indentation level as the selector they belong to. @media blocks are translated to indented form: @media (min-width: 768px) on its own line, with declarations indented beneath.

Is my CSS sent to a server?

No. The conversion is performed by JavaScript running in your browser. Stylesheets containing internal class names, design tokens, or unreleased branding never leave your machine. Open DevTools Network tab — clicking Run makes zero requests.