CSS to Sass

Your data never leaves your browser

Convert CSS to Sass indented syntax — no braces or semicolons.

Brie — Bug Reporting Tool

Chasing a CSS bug across browsers?

Brie captures screenshots with device info and browser version automatically — no more "works on my machine."

Install Brie — It's FreeLearn more →

About CSS to Sass

Transform standard CSS into Sass indented syntax (.sass files) by removing curly braces and semicolons, nesting child selectors, and extracting repeated values as $variables. The indented Sass syntax is more concise than SCSS and uses whitespace for structure.

How to use

  1. Paste your CSS into the input panel.
  2. The converted Sass (indented syntax) appears in the output panel.
  3. Click Copy and paste the output into your .sass file.

More CSS Tools

CSS to SCSS

Convert plain CSS to SCSS with nested selectors and $variables.

CSS to Less

Convert CSS to Less stylesheet language with @variables and nesting.

CSS Prettify

Format and beautify CSS code with consistent indentation and line breaks.

Frequently Asked Questions

FAQs about CSS to Sass

What is Sass indented syntax?

Sass indented syntax (also called "Sass" or ".sass" files) uses indentation instead of curly braces and omits semicolons. It is the original Sass syntax and is more concise than SCSS.

What is the difference between .sass and .scss files?

.sass files use the indented syntax with no braces or semicolons. .scss files use CSS-like syntax with braces and semicolons. Both compile to the same CSS.

Can I use this output directly in a project?

Yes. Save the output as a .sass file and use a Sass compiler (e.g. the sass npm package or Dart Sass) to compile it to CSS.

Does it handle media queries?

The converter handles standard rule sets well. Nested @media rules may need manual adjustment after conversion.

Is my data safe?

All conversion runs in your browser. No data is sent to any server.