CSS to SASS
Paste CSS and instantly get clean indented SASS syntax with braces and semicolons removed.
Example
Standard CSS in:
.btn {
color: red;
padding: 4px 8px;
}
@media (max-width: 600px) {
.btn { color: blue; }
}Indented SASS out:
.btn
color: red
padding: 4px 8px
@media (max-width: 600px)
.btn
color: blue
How it works
A brace-matching parser walks the CSS, turning each rule block into an indented section and each declaration into a colon-separated line, dropping braces and semicolons. Comments and at-rules (like @media) are preserved with correct nesting.
Good to know
CSS to SASS converts standard CSS into the original indented Sass syntax (the .sass file format) by removing every brace and semicolon and turning each rule block into an indentation level instead. It is built for front-end developers and designers who are adopting Sass on a project that already has plain CSS, or who simply prefer the leaner indented style over the brace-based SCSS variant.
Reach for it when you are migrating a stylesheet into a Sass-based build pipeline, cleaning up a snippet copied from a CodePen or a browser inspector, or standardising a team's source files on .sass. Because everything runs in your browser, you can paste proprietary or unreleased styles without them ever being uploaded, which matters if the CSS is part of an internal product.
Reading the output is straightforward: each selector sits on its own line with no opening brace, its declarations are nested two spaces beneath it, and at-rules such as @media push their contained selectors one level deeper. If a line still carries a colon it is a declaration (property: value); if it has no value after the colon it was kept as a selector or raw token. Verify that the indentation depth matches the nesting you expected before saving the file.
One practical caveat: the converter does the structural work of stripping syntax, but it does not invent Sass features for you. It will not collapse repeated selectors into nested parent rules, generate variables from your hex values, or rewrite vendor prefixes, and the page itself flags that complex interpolation or non-standard syntax may need a manual pass. Treat the result as a faithful syntax translation, then layer Sass nesting and variables on top by hand.
Frequently asked questions
What is the difference between SASS and SCSS syntax?
SCSS uses braces and semicolons like CSS, while the original SASS (.sass) syntax uses indentation instead. This tool produces the indented .sass syntax by stripping braces and semicolons and converting nesting to indentation.
Does it support @media and nested rules?
Yes. At-rules like @media are kept and their contained selectors are indented one level deeper, so nesting is preserved. Comments are also carried over.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
Should I use .sass or .scss for a new project?
Both compile to identical CSS, so the choice is stylistic. SCSS uses familiar CSS-style braces and semicolons and is the more common default today, while the indented .sass syntax is terser and relies on whitespace; pick whichever your team finds easier to read and maintain.
Can I convert SASS back into regular CSS?
Not with this particular tool, which only goes from CSS to indented SASS. Converting indented SASS back to standard CSS requires a separate converter or compiling it with the Sass engine, which outputs browser-ready CSS.
Will the indented SASS file work directly in a browser?
No. Browsers only understand plain CSS, so a .sass file must first be compiled by a Sass processor (such as Dart Sass) into a .css file before the browser can use it.
Does the indentation have to be spaces or can I use tabs?
In the indented Sass syntax, indentation defines structure, so it must be consistent throughout a file. This tool emits two-space indentation; mixing tabs and spaces within the same file will cause Sass to report an error.
How do I add nesting and variables after converting?
The converter only translates syntax, not structure, so you add Sass features manually afterward. You can group child selectors under a shared parent to use nesting, and replace repeated values like colors or spacing with $variables defined at the top of the file.
Does it keep my comments and media queries?
Comments are carried over into the output, and at-rules such as media queries are preserved with their contained selectors indented one level deeper so the original nesting structure stays intact.
Is the original indented Sass syntax deprecated?
No. The indented .sass syntax remains fully supported alongside SCSS in current Sass implementations like Dart Sass, though SCSS has become the more widely used of the two formats.
Related tools