Parser gate · source in, source out
Choose the grammar before formatting.
SCSS, indented Sass, and plain CSS are related, but they are not the same grammar. A formatter is only trustworthy when it knows which language owns the tokens.
SCSS
Recommended hereBrace syntax · .scss
$gap: 1rem;
.card { padding: $gap * 2; }Sass
Choose another parserIndented syntax · .sass
$gap: 1rem .card padding: $gap * 2
CSS
No SassScriptBrowser stylesheet
.card {
padding: 2rem;
}Syntax specimen ledger
SCSS-only features the parser must recognize
These tokens are not decoration. They determine which grammar can parse the document without treating valid SCSS as malformed CSS.
$brand: #c3caed;Reusable SassScript valuesPASS// private implementation noteA comment form plain CSS rejectsPASS@use "tokens" as t;Namespaced module membersPASS.icon-#{$size}Computed selector or property textPASS@include stack($gap);Reusable source-level rulesPASS&:hover { color: $brand; }Parent selector and nested rulesPASSFormat ≠ compile
Formatting preserves the source language.
Whitespace and wrapping become stable. SassScript is not evaluated and project files are not resolved.
We do · format
$gap:1rem;.card{padding:$gap*2}
↓ FORMAT
$gap: 1rem;
.card {
padding: $gap * 2;
}- Parse with the SCSS grammar
- Normalize spacing and indentation
- Return readable .scss source
We do not · compile
NO CSS EMISSION
- Resolve @use or @forward paths
- Evaluate variables, functions, or loops
- Emit browser-ready CSS
Parser error clinic
A line and column beat a vague red box.
A real parser can point to the token that broke the grammar. Fix that boundary first; later errors are often cascading symptoms.
10 .grid {
11 gap: $gap + 1rem;
12 width: 100% + ;
^
13 }Expected a value after the + operator. Remove the operator or provide the missing SassScript operand.
Parity everywhere
Use the same parser family in browser, editor, and CI.
Browser
Fast local cleanup and parser diagnostics
Prettier SCSS parser
The grammar selected by this page
Editor
Format-on-save with repository settings
CI
prettier --check "**/*.scss"