Formatters
SCSS Formatter
Prettier for SCSS — the formatting your Sass codebase's CI expects, in a browser tab.
In short
Format SCSS online with prettier: $variables, nesting, mixins, @use and control directives consistently styled. Exact error positions. Free.
By NaveenKumar T · Updated
Learn: Sass vs SCSS vs LESS vs Stylus: Choosing a CSS Preprocessor
- Real CSS parsing
- Exact error positions
- Choose your indentation
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
SCSS Formatter: input and output
A modal written in a hurry: @use, three variables and a map on one line, a mixin using math.div(), BEM-style &__ nesting and a breakpoint pulled from the map.
@use "sass:math";
$overlay:rgba(15,23,42,.6);$radius:12px;$breakpoints:(sm:640px,md:768px);
@mixin elevate($level){box-shadow:0 math.div($level,2)*1px $level*1px rgba(0,0,0,.2)}
// Dialog panel
.modal{position:fixed;inset:0;display:grid;place-items:center;background:$overlay;
&__panel{width:min(90vw,32rem);padding:$radius*2;border-radius:$radius;background:#fff;@include elevate(24);}
&__title{margin:0 0 .5rem;font-size:1.25rem}
@media (min-width:map-get($breakpoints,md)){&__panel{padding:$radius*3}}
}@use "sass:math";
$overlay: rgba(15, 23, 42, 0.6);
$radius: 12px;
$breakpoints: (
sm: 640px,
md: 768px
);
@mixin elevate($level) {
box-shadow: 0 math.div($level, 2) * 1px $level * 1px rgba(0, 0, 0, 0.2);
}
// Dialog panel
.modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: $overlay;
&__panel {
width: min(90vw, 32rem);
padding: $radius * 2;
border-radius: $radius;
background: #fff;
@include elevate(24);
}
&__title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
@media (min-width: map-get($breakpoints,md)) {
&__panel {
padding: $radius * 3;
}
}
}
The $breakpoints map is expanded to one entry per line, $radius*2 and math.div($level,2)*1px gain spaces around their operators, .6 becomes 0.6, and the // comment plus the @include line are kept — while map-get($breakpoints,md) inside the @media prelude is printed as written.
Learn more
Formatting SCSS stylesheets
SCSS is the dominant styling dialect of large design systems, and prettier's SCSS support is what most of them enforce: $variables aligned with their values, nested selectors and & references indented meaningfully, @mixin/@include/@use statements styled consistently.
Formatting parses the full Sass grammar, so a broken interpolation or unclosed map reports its exact position — friendlier than the compiler's error chain when you just pasted a snippet.
Design-system SCSS deserves CI-grade formatting
In a design system, SCSS files are an API: tokens, mixins, and component styles that dozens of engineers consume and modify. Style drift in those files creates merge conflicts and review noise out of proportion to the changes — which is why mature systems enforce prettier in CI. This page is the same enforcement without the checkout: validate that a snippet is formatted the way the pipeline will demand before you open the PR.
It's equally useful in reverse — when documentation or a colleague hands you unformatted SCSS, one pass here makes the structure (which map keys, which nested levels, where the @use boundaries are) legible before you integrate it.
Help
Frequently asked questions
Everything you need to know about the SCSS Formatter.
01How do I use the SCSS Formatter?
Paste your SCSS (or load a file/URL) and press Format. Prettier's Sass-aware parser re-prints $variables, nesting, @use/@mixin/@include statements and maps in canonical style, reporting the exact position of any syntax it can't get past.
02SCSS vs SASS — which page do I need?
SCSS is the brace-and-semicolon syntax (this page formats it). SASS is the older indented syntax — for that, use the SASS to SCSS converter to modernize, since prettier (like most tooling) standardizes on SCSS.
03How are Sass maps, @use modules and arithmetic formatted?
Maps get the treatment design-system files rely on: $breakpoints: (sm: 640px, md: 768px) is expanded to one entry per line, which keeps token diffs readable. @use and @forward stay where you put them, @mixin/@include lines keep their arguments, and #{…} interpolation in selectors is untouched. Arithmetic is spaced consistently — $radius*2 becomes $radius * 2, math.div($level,2) becomes math.div($level, 2) — and rgba(15,23,42,.6) becomes rgba(15, 23, 42, 0.6). One exception: arguments inside a @media prelude, such as map-get($breakpoints,md), are printed as written.
Keep working
Related tools
SCSS / Sass to CSS
The real dart-sass compiler in a browser tab — mixins, functions, @use and nesting evaluated, not approximated.
LESS Formatter
Formatters
CSS Formatter
One stylesheet workspace, three engines: prettier for canonical formatting, js-beautify for unminifying broken bundles, and a minifier for the compact form — pick the mode in the rail.
SCSS ⇄ Sass Converter
The two Sass syntaxes, in either direction — braces and semicolons added or removed, everything else left exactly as written.
CSS Preprocessor Converter
One page for every cross-dialect trip — LESS, SCSS, indented Sass and Stylus, in any of the twelve directions.
CSS to LESS
Translate stylesheets from plain CSS to LESS — structure, variables and nesting mapped for you.