About CSS to SASS

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

Use Cases

• Ruby developers using SASS with Rails asset pipeline
• Teams preferring minimal syntax without braces and semicolons
• Developers converting CSS for projects using the indented SASS style
• Frontend devs migrating from verbose CSS to concise SASS syntax

Tips

• Note that SASS uses indentation instead of curly braces
• Verify that semicolons are properly removed in the SASS output
• Check that nested properties use SASS's namespace syntax

Fun Facts

• Sass (Syntactically Awesome Stylesheets) was created by Hampton Catlin in 2006, making it the oldest CSS preprocessor.
• The original Sass syntax was inspired by Haml, another indentation-based language created by Hampton Catlin.
• Sass was initially implemented in Ruby, then ported to C/C++ (LibSass) in 2012, and finally to Dart (Dart Sass) in 2016.

FAQ

What is Sass indented syntax?

The original Sass format: no braces, no semicolons, indentation defines nesting (like Python). Shorter but less tolerant of copy-paste. Modern projects usually pick SCSS instead.

When should I use SASS over SCSS?

Rarely in new code. SASS is common in Ruby-heritage projects and some design-system codebases that prize conciseness.

Does the output round-trip back to CSS cleanly?

Yes — run SASS to CSS on the result and you get your original stylesheet back (minus comments and with formatting normalized).

What about mixed @include and @use?

@use is the modern import (with namespacing). The converter uses @use by default; toggle to @import for pre-Dart-Sass-1.23 projects.