Sass to CSS Converter

Q: What is the difference between Sass and SCSS?

Same language, two syntaxes. Sass (.sass) uses indentation; SCSS (.scss) uses braces and semicolons like CSS.

Convert indented Sass to CSS, or to SCSS, LESS and Stylus, in your browser.

Operation

Input

Output

What you can do here

Sass to CSS: indented .sass syntax to braces-and-semicolons CSS
Sass compiler (LibSass via sass.js) running in your browser, no install
Sass to SCSS, LESS and Stylus
Beautify, minify and validate CSS from the same menu

How Sass to CSS conversion works here

Indented Sass has no braces or semicolons; nesting is shown by indentation. Choose SASS to CSS and it is compiled with LibSass (sass.js), resolving $variables, nesting, @mixin/+include and functions into plain CSS. The compiler is loaded on demand and runs in your browser, so nesting, mixins, functions and math are resolved to plain CSS. @import of other files cannot be followed, because only the pasted code is available. Newer Dart Sass-only features such as @use modules may not compile here; use the sass CLI for those.

Common questions

What is the difference between Sass and SCSS?

Same language, two syntaxes. Sass (.sass) uses indentation; SCSS (.scss) uses braces and semicolons like CSS.

Is this a real Sass compiler?

Yes, LibSass compiled to JavaScript. It handles variables, nesting, mixins, functions and math. Dart Sass-only features such as @use modules may fail.

Is my code uploaded?

No. Everything runs in your browser.