SCSS / Less Formatter Online
Beautify or minify SCSS and Less stylesheets instantly in your browser.
When an SCSS / Less formatter is the right tool
Nested stylesheets often arrive with mixed indent, or as a compacted paste. This page is for a first tidy-up or a compact copy in the browser. Choose SCSS or Less (for the sample and placeholder only), then Beautify or Minify. In Beautify mode you can pick 2- or 4-space indent. The output updates as you type.
The rewriter only looks at braces at the start or end of a trimmed line. It does not compile Sass or Less. For plain CSS, the CSS Formatter is the closer match.
Use cases
Re-indenting a nested stylesheet
Load Sample pastes a short SCSS or Less example (depending on the toggle) with variables, a mixin or parametric mixin, nesting, and a hover rule. Beautify keeps those lines and applies indent from the braces. Blank lines in the sample are removed.
Compacting a file for a paste
Minify drops comments and most whitespace so the sheet sits on one line. Check quoted values afterward, because spaces next to : or ; inside a string can disappear.
Tidying a fragment that is already one declaration per line
The line-based rules work best when opening braces are at the end of a selector line and closing braces are on their own line. A whole rule on one line is left at the current depth.
How formatting works
Empty or whitespace-only input leaves the output empty. Beautify trims lines, skips blanks, and maintains a depth counter from leading } and trailing {. Minify strips comments, then punctuation spacing and newlines. You can copy the result when it is present.
$primary: #3b82f6;
.container {
color: $primary;
&:hover {
opacity: 0.9;
}
}
$primary: #3b82f6;
.container {
color: $primary;
&:hover {
opacity: 0.9;
}
}The variable, the container, and the hover rule keep their text. Only the indent and the removed blank lines change.
What this tool does not do
It does not compile SCSS or Less, convert one dialect into the other, or keep blank lines. A comment that ends with an opening brace can shift later indent. Nothing is sent to a server. For plain CSS, use the CSS Formatter.
How to use SCSS / Less Formatter
- Choose SCSS or LESS if you plan to load the matching sample.
- Paste your source, or use Load Sample.
- Choose Beautify or Minify. In Beautify mode, pick 2- or 4-space indent. Copy the result when it looks right, or Clear to start over.
Frequently asked questions
Does this page parse SCSS or Less?
No. Beautify and Minify are text rewrites, not a Sass or Less compiler. Variables, mixins, and nesting are not interpreted. The SCSS and Less buttons only change the placeholder and which sample Load Sample pastes; they do not convert between dialects or change the formatter rules. Switching them does not clear the input.
How does Beautify decide the indent?
It splits the input into lines, trims each line, and skips blank lines entirely. A line that starts with } decreases the indent before it is written. A line that ends with { increases the indent after it is written. A one-line rule such as .a { color: red; } does not change depth, because it neither starts with } nor ends with {. Indent is 2 or 4 spaces (default 2).
What does Minify change?
It removes /* */ block comments and // line comments, then strips space around { } : ; and commas, deletes newlines, and collapses remaining runs of spaces. Comments and strings are not parsed as CSS, so a // or a colon inside a quoted value can still be rewritten. The result is typically a single compact line.
Why did my blank lines or comments with braces look wrong?
Beautify drops empty lines, so visual spacing between rules disappears. A comment line that ends with {, such as // .foo {, is treated as an opening block and the following lines are indented one level too far until a later } line appears.
Is my stylesheet sent to a server?
No. Formatting runs in your browser as you type. Closing the tab discards what you pasted. Do not paste stylesheets that contain secrets if you would not be comfortable with them sitting in memory on this device.
Is there a file size limit?
There is no server-imposed limit, because nothing is uploaded. A few thousand lines is comfortable. A very large file can make the tab feel slow; in that case, format a smaller excerpt or use a local tool.