Does formatting compile SCSS into CSS?

No. The formatter parses and prints SCSS. Variables, mixins, and nesting remain; it does not resolve imports or run a Sass compiler.

Why did .8 become 0.8?

The printer uses a consistent numeric representation. Review the formatted diff; source formatting does not test browser rendering or compiled output.

Will imported files be loaded?

No. This operation formats the supplied text in the browser and does not fetch or resolve your project imports. Build the complete project in its normal toolchain.

Web engineering

SCSS Formatter

Format nested Sass syntax into a stable, reviewable structure.

Online tools Pricing

Input0 characters

Result0 characters

Prefer a native workflow?

Keep SCSS Formatter one shortcut away.

DevSexy for Mac puts the same private workflow in a focused desktop app, with global shortcuts and no browser tab to manage.

Global shortcutOffline-readyLocal processing

Try the Mac app free

This browser tool remains free.

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 here

Brace syntax · .scss

$gap: 1rem;
.card { padding: $gap * 2; }

Sass

Choose another parser

Indented syntax · .sass

$gap: 1rem
.card
  padding: $gap * 2

CSS

No SassScript

Browser stylesheet

.card {
  padding: 2rem;
}

Formatter only: DevSexy reformats SCSS source. It never compiles SCSS into CSS.

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.

FeatureSpecimenWhy it selects SCSSParser

$variables$brand: #c3caed;Reusable SassScript valuesPASS

// comments// private implementation noteA comment form plain CSS rejectsPASS

@use / @forward@use "tokens" as t;Namespaced module membersPASS

Interpolation.icon-#{$size}Computed selector or property textPASS

Mixins@include stack($gap);Reusable source-level rulesPASS

Nesting&:hover { color: $brand; }Parent selector and nested rulesPASS

Format ≠ 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.

ParseError · line 12, column 18

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

prettier --check "**/*.scss"

Run a reproducible example

Format SCSS nesting and mixin calls while keeping the source in SCSS.

Using an example replaces the current input, reference input, operation, and options. Public demonstration data only.

Indent a nested hover rule

Two-space formatting preserves the variable and the parent selector.

Input

$brand:#7c3aed;.button{color:$brand;&:hover{opacity:.8}}

The decimal is printed as 0.8; the result is SCSS rather than compiled CSS.

$brand: #7c3aed;
&:hover {
opacity: 0.8;

Format a mixin and its call

The source defines a gap mixin and includes it inside a grid rule.

Input

@mixin gap($n){gap:$n}.grid{@include gap(1rem)}

Both mixin definition and include remain in the formatted source.

@mixin gap($n)
@include gap(1rem);

Continue with a related task

CSS Beautifier & Minifier

Format, diagnose, and minify CSS with syntax-aware processing.

LESS Formatter

Format LESS variables, mixins, nesting, and rules without compiling.

Text Diff

Compare two texts by line, word, or character in a local worker.

Repeat the task in DevSexy for Mac

Use the native app for repeated offline work and direct Option shortcuts.

Direct answer

What is SCSS Formatter?

Format SCSS online with Prettier’s SCSS grammar, choose indentation, and receive parser-backed diagnostics without compiling or uploading your stylesheet.

What can it do?

Format

How to use SCSS Formatter

01
Prepare the input
Paste SCSS source with its variables and nested rules.
02
Choose the operation
Choose indentation and wrap width, then Format.
03
Review the evidence
Compile with your Sass toolchain and review actual CSS separately.

Frequently asked questions

Does formatting compile SCSS into CSS?: No. The formatter parses and prints SCSS. Variables, mixins, and nesting remain; it does not resolve imports or run a Sass compiler.
Why did .8 become 0.8?: The printer uses a consistent numeric representation. Review the formatted diff; source formatting does not test browser rendering or compiled output.
Will imported files be loaded?: No. This operation formats the supplied text in the browser and does not fetch or resolve your project imports. Build the complete project in its normal toolchain.