SCSS to SASS Converter
Convert SCSS (Sassy CSS) to SASS indented syntax instantly. Remove curly braces and semicolons while keeping your variables, nesting, and mixins intact.
Input SCSS
Converted SASS
Example
Here's a real SCSS snippet converted to SASS indented syntax. Notice how the curly braces and semicolons are stripped, but $variables, nesting, and &:hover selectors stay exactly the same.
SCSS with variables and nesting → SASS indented syntax
SCSS input (with braces and semicolons):
SASS output (indented syntax, no braces or semicolons):
Click Sample in the toolbar to load this example directly into the editor and try it yourself.
What Is SCSS to SASS Conversion?
SASS actually has two syntaxes. SCSS (Sassy CSS) uses curly braces and semicolons — just like regular CSS — which makes it easy to pick up. The original SASS indented syntax skips all that punctuation and uses indentation to define structure instead, similar to Python or CoffeeScript.
Converting SCSS to SASS means stripping the {} and ;, then relying on consistent indentation to show nesting. Your $variables, @mixin declarations, @include calls, and parent selectors (&) all stay the same — only the punctuation changes.
How to Use
Paste or upload your SCSS
Paste your SCSS code into the left editor, or click Upload to load a .scss file from disk. Click Sample to load a ready-made example.
Conversion happens automatically
The converter runs as you type. It removes {, }, and ;, then applies indentation to reflect your nesting structure. The result appears in the right panel instantly.
Copy or download the SASS file
Click Copy to put the result on your clipboard, or Download to save it as a .sass file. Drop it straight into your project and you're done.
When Should You Use SASS Indented Syntax?
Most teams default to SCSS because it looks like CSS and has zero learning curve for newcomers. But some developers genuinely prefer the cleaner look of SASS indented syntax — less punctuation noise, more whitespace-driven structure. If you're working on a project that already uses .sass files, or you're migrating a codebase, this tool handles the mechanical part of that conversion instantly.
Worth knowing: CSS-Tricks has a solid rundown of the SCSS vs SASS syntax debate. Both compile to the same CSS output via the sass npm package or any CSS preprocessor pipeline — so the choice really does come down to personal or team preference.
FAQ
What is the difference between SCSS and SASS syntax?
SCSS uses curly braces {} and semicolons ; like regular CSS. SASS indented syntax uses whitespace and indentation instead — no braces, no semicolons. Both are valid Sass and compile to identical CSS output.
Do $variables work the same in both syntaxes?
Yes. $variable: value; in SCSS becomes $variable: value in SASS — only the trailing semicolon is dropped. Variable names, values, and usage in selectors are identical across both syntaxes.
What happens to @mixin and @include in the converted output?
They work exactly the same way. @mixin declarations and @include calls just lose their trailing semicolons and rely on indentation for block structure. The Sass mixin documentation covers both syntaxes side by side.
Can I convert back from SASS to SCSS?
Yes — use the CSS to SCSS or a dedicated SASS-to-SCSS tool to go the other direction. The sass CLI also has a --style flag and can output SCSS directly.
Which syntax should I use for new projects?
SCSS is the safe default — it's a superset of CSS, so any valid CSS is also valid SCSS. That makes onboarding easier. SASS indented syntax is a great choice if your team prefers minimal punctuation and is comfortable with Python-style whitespace structure. Either way, the official Sass docs support both equally.
Does this converter handle nested selectors and &:hover?
Yes. Nested selectors and parent selectors like &:hover, &::before, and &.active are preserved exactly — the converter only removes punctuation and adjusts indentation.
Related Tools
Working with stylesheets? Check out the SCSS to CSS converter to compile your styles, or the CSS Formatter to clean up messy CSS.