SCSS Formatter & Beautifier
Beautify and minify SCSS online. Format nested SCSS with variables, mixins, and nesting with consistent indentation.
What is SCSS?
SCSS (Sassy CSS) is a preprocessor scripting language that extends CSS with features like variables ($color: blue), nesting, mixins, functions, and more. SCSS files are compiled to standard CSS before being served to browsers.
Formatting SCSS improves readability and helps teams maintain consistent code style across large stylesheets with complex nesting hierarchies.
How to Use
- Paste your SCSS or upload a .scss file
- Choose Beautify or Minify mode
- Adjust indent size in Settings
- Copy or download the result
Frequently Asked Questions
What SCSS features are supported?
Variables ($var), nested selectors, & parent references, @mixin, @include, @extend, @import, @use, @forward, // single-line comments, and all standard CSS including @media, @keyframes, @supports.
Can I use this for Sass (.sass) files?
The .sass indented syntax is different from SCSS. This formatter is designed for SCSS (braces and semicolons). For .sass files, the formatting may not produce correct results.
Does minifying SCSS serve any purpose?
Typically you minify the compiled CSS output, not the source SCSS. However, minifying SCSS can be useful for sharing code snippets or reducing the size of SCSS sent in development APIs.
Are // comments preserved when beautifying?
Yes, single-line // comments are preserved in Beautify mode. In Minify mode, all comments are removed.
Is my code sent to a server?
No. All processing is client-side in your browser.