What the CSS to SASS converter produces
Sass's original syntax, used in .sass files, has no braces and no semicolons; indentation alone defines which declarations belong to which selector. Unlike SCSS, plain CSS is not valid indented Sass, so a conversion is required. This CSS to SASS converter parses your CSS, nests rules under their shared parent selector, and prints them with 2-space indentation, property: value lines and no punctuation at line ends.
Example
.nav{display:flex}.nav a{color:#333}.nav a:hover{color:#0f766e}h1,h2{margin:0}.nav
display: flex
a
color: #333
&:hover
color: #0f766e
h1, h2
margin: 0.nav a became an indented a under .nav, the hover rule became &:hover one level deeper, and the selector list h1, h2 stayed on a single line.
Indented syntax details to know
| CSS | Indented Sass output |
|---|---|
a { color: red; } | a followed by an indented color: red |
Multi-line /* comment */ | A single-line /* comment */, since the indented syntax is line-based |
Empty rule .x {} | .x with a /* empty */ placeholder, because a selector needs an indented body |
@import url(...); | @import url(...) without the semicolon |
Indentation must be consistent in the whole file. The converter uses 2 spaces; if you edit by hand, avoid mixing in tabs.
After converting
You can now add Sass features using the indented shorthand: $brand: #0f766e for variables, =mixin-name to define a mixin and +mixin-name to include it. Check the result with the SASS Compiler; it should produce CSS equivalent to your original. If your team prefers braces, CSS to SCSS gives the same nesting in SCSS syntax.
Mistakes that break a .sass file
- Adding semicolons back. A line such as
color: red;is a syntax error in the indented syntax. Leave line ends bare. - Mixing tabs and spaces. Sass rejects a file whose indentation is inconsistent, even if it looks aligned in your editor. Configure the editor to insert spaces for
.sassfiles. - Putting a declaration on the selector line.
.nav display: flexis not valid; the property must go on its own indented line below the selector. - Splitting a selector list carelessly. A long list may span several lines only if every line except the last ends with a comma.
The indented syntax also accepts the longer @mixin and @include keywords, so you can keep those spellings if your team finds = and + too terse.
Why choose the indented syntax?
Teams pick .sass files mostly for brevity: without braces and semicolons a stylesheet is noticeably shorter, and the structure is visible from indentation alone, which suits people who already write Pug, Haml, Slim or Python. The trade-off is that you cannot paste CSS snippets from documentation or browser tools straight in; they need converting first, which is exactly what this page is for. Both syntaxes compile with the same Dart Sass compiler and can import each other, so a project can adopt the indented style gradually.
Limitations
- Compound selectors such as
.btn.activeare not nested under.btn. @keyframesand@font-faceare converted to indented form without nesting.- Syntax errors in the input CSS, such as a missing closing brace, stop the conversion and are reported.
Conversion happens entirely in your browser.