Convert Sass (Indented) to CSS Online
Compile indented Sass syntax (.sass) to pure CSS. Free, in your browser, no Ruby, Dart, or Node required.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Use cases
Indented Sass to CSS without installing anything
Ruby Sass legacy
Compile .sass files from legacy projects that used Ruby Sass, without needing to install it.
No dependencies
No Ruby, Dart, Node.js, or npm needed. Works directly in the browser.
Learning Sass
Try the original Sass indented syntax and see the generated CSS instantly.
100% private
Your Sass code is never sent to any server. Compilation happens in your browser.
How it works
Three steps, no hassle
Paste or upload your .sass file
Drag your .sass file or paste code with indented syntax (no curly braces or semicolons). .scss files are not accepted.
Instant compilation
The Sass compiler processes your code in the browser and generates valid CSS instantly. Syntax errors are shown with line numbers.
Copy or download the CSS
Copy the resulting CSS to the clipboard or download it as a .css file ready to use in any web project.
FAQ
Got questions?
They are two different syntaxes of the same Sass preprocessor. The .sass syntax (also called 'indented syntax' or 'original Sass') was created by Hampton Catlin in 2006 and uses indentation to define rule hierarchy, without curly braces ({}) or semicolons (;), similar to Python or CoffeeScript syntax. The .scss syntax (Sassy CSS) was introduced in Sass 3 in May 2010 and uses the same curly braces and semicolons structure as standard CSS, making it compatible with existing CSS and easier to adopt for developers familiar with CSS. This tool compiles exclusively the indented .sass syntax. For .scss, use the scss-to-css tool.
Hampton Catlin designed Sass in 2006 while working as a web developer, influenced by his experience with Haml (another preprocessor he created to simplify HTML). The philosophy was that style code should be cleaner and less verbose than CSS: removing curly braces and semicolons reduced visual noise and enforced consistent indentation that improved readability. The first implementation of Sass was in Ruby, as part of the Haml framework for Ruby on Rails. For several years, Sass was synonymous with the indented syntax and required Ruby to be installed for compilation.
The .sass syntax supports all Sass features: variables ($color: #333), selector nesting, mixins (@mixin and @include), inheritance with @extend, functions with @function, mathematical operations, imports with @use and @forward (the modern module system of Dart Sass, introduced in Dart Sass 1.23 in October 2019 as a replacement for @import), control flow directives (@if, @each, @for, @while), interpolation with #{}, and the parent selector operator &. The only difference from .scss is syntactic: indentation instead of braces and no semicolons.
There are several scenarios where you don't want or can't install a Sass compiler in your environment: when working on a shared computer or without installation permissions, in restricted CI/CD environments, when quickly editing a .sass file inherited from a legacy project that used Ruby Sass (which reached end-of-life on March 26, 2019), when learning Sass without setting up a full development environment, or when needing a quick check of the CSS generated by a specific Sass snippet. Convertir.ai runs a Sass compiler compiled to WebAssembly directly in your browser, with no server dependencies.
The tool compiles indented syntax (.sass) that is compatible with Dart Sass (the official reference implementation since 2019, when Ruby Sass reached its end-of-life on March 26, 2019 and LibSass was deprecated in October 2020). The vast majority of .sass code written for Ruby Sass is compatible with Dart Sass, with the exception of the module system: @import was deprecated in Dart Sass and replaced by @use and @forward. If your .sass code uses @import extensively, the resulting CSS may include deprecation warnings, but compilation will still work.
The indented syntax has advocates who argue it produces cleaner and more readable code: the absence of curly braces and semicolons reduces character count, enforced indentation improves code consistency, and the syntax is more similar to modern languages like Python, CoffeeScript, or Pug. However, .scss adoption is overwhelmingly dominant in the industry: modern CSS frameworks (Bootstrap 5, Foundation, Tailwind with its Sass layer) use .scss, typical development environments (webpack, Vite, Parcel) configure sass-loader or the Vite plugin for .scss by default, and most developers are more familiar with the CSS brace syntax. For new projects, .scss is usually the more pragmatic choice due to greater tooling availability, snippets, and IDE support.
Compile Sass to CSS: indented .sass syntax, Ruby Sass heritage, and .sass vs .scss differences
Sass (Syntactically Awesome Style Sheets) was created by Hampton Catlin in 2006, with the first implementation developed by Nathan Weizenbaum in Ruby. The original Sass syntax, known as 'indented syntax' or simply 'Sass' (with the .sass extension), is inspired by the philosophy of Haml — another preprocessor created by Catlin to simplify HTML in Ruby on Rails applications. The indented syntax eliminates two elements of CSS that Catlin considered unnecessary visual noise: the curly braces ({}) that delimit declaration blocks, and the semicolons (;) that separate individual declarations. Instead, hierarchy is defined through indentation, similar to Python, CoffeeScript, or modern versions of Pug (formerly Jade). This design decision makes .sass code notably more compact: a CSS block that requires 6 syntax characters (opening brace, newline, semicolon, newline, closing brace) is reduced to just the indentation. The first public version of Sass was released in November 2006 as part of the Haml framework for Ruby on Rails, and for the first years of its existence, compiling Sass required having Ruby installed.
In May 2010, Sass 3 introduced the SCSS syntax (Sassy CSS, with the .scss extension), designed to be a superset of CSS: any valid CSS file is also a valid SCSS file. This strategic decision massively accelerated Sass adoption in the industry, as developers could migrate existing CSS projects to SCSS simply by renaming the file. Bootstrap adopted Sass (in its SCSS variant) in Bootstrap 3.0 in August 2013, which consolidated SCSS as the de facto standard for CSS preprocessors. Dart Sass, the current reference implementation of Sass, was launched by Natalie Weizenbaum (who also developed the original Ruby implementation) and the Google team as the primary implementation in November 2016. Ruby Sass reached its end-of-life on March 26, 2019, and LibSass (the C++ implementation, faster, used by node-sass) was officially deprecated in October 2020. Since then, Dart Sass is the only actively maintained implementation. Dart Sass fully supports the indented .sass syntax, in addition to SCSS.
The need to compile .sass syntax without installing Ruby, Dart, or Node arises in several practical contexts. The most common is maintaining legacy projects: thousands of web projects developed between 2006 and 2014 use .sass syntax with Ruby Sass, and when a developer needs to modify the styles of one of these projects without setting up the original development environment (which may require a specific Ruby version, the Sass gem at a specific version, and potentially Bundler with a specific Gemfile), having an online compiler is the fastest solution. Another context is education: Sass indented syntax is frequently taught in web development courses as an example of CSS preprocessors because it clearly illustrates the concept of selector nesting and inheritance; students learning Sass in a restricted educational environment (a Chromebook, a computer lab, a sandboxed environment) cannot install local compilers. Finally, converting .sass to CSS is the first step for migrating projects that use the indented syntax to SCSS or to modern solutions based on PostCSS, CSS custom properties (native CSS variables, supported in all modern browsers since 2017), or CSS nesting (the CSS Nesting specification, implemented in Chrome 112, Firefox 117, and Safari 16.5, which makes most of Sass's nesting functionality obsolete for projects that only need to support current browsers).