SCSS Formatter Online — Format SCSS Code

Beautify SCSS stylesheets with $variables, @mixin/@include, nested selectors, and parent references using consistent 2-space indentation — 100% in your browser.

Input SCSS

Formatted Output

What is a SCSS Formatter?

A SCSS formatter reformats SCSS stylesheets with consistent 2-space indentation, one declaration per line, and proper nesting depth for $variables, nested selectors, @mixin blocks, @include calls, and parent-selector (&) references. It is the fastest way to clean up SCSS exported from a design tool, copied from a Bootstrap theme, or generated by a build pipeline.

SCSS is the indented superset of CSS that adds variables, nesting, mixins, partials, and modules (@use / @forward). The OpenFormatter SCSS formatter applies the same conventions Prettier and stylelint use: 2-space indent, opening brace on the selector line, one rule per line. Formatting is purely cosmetic — dart-sass produces byte-identical CSS regardless of source whitespace.

How to format SCSS — 4 steps

Paste your SCSS. Copy a stylesheet, mixin, or rule block into the Input panel. Click Load Sample to try a demo with $variables and @mixin.
Click Format. The formatter applies 2-space indentation client-side — no upload.
Review the output. The Output panel shows beautified SCSS with one declaration per line and aligned nesting.
Copy the result. Click Copy to paste the formatted SCSS into your editor or pull request.

Side-by-side: minified vs formatted SCSS

Minified

$primary:#3b82f6;@mixin btn($c){padding:1rem;background:$c;}.card{.title{color:$primary;}.action{@include btn($primary);}}

Formatted

$primary: #3b82f6;

@mixin btn($c) {
  padding: 1rem;
  background: $c;
}

.card {
  .title {
    color: $primary;
  }
  .action {
    @include btn($primary);
  }
}

SCSS-Aware

Formats $variables, @mixin/@include, @use, @forward, @extend, @if/@else, and parent-selector (&) references with consistent 2-space nesting.

CSS Output Identical

Formatting only adjusts source whitespace. dart-sass produces byte-identical compiled CSS from formatted and unformatted input.

Client-Side Only

Stylesheets with internal design-token names, brand colors, or proprietary class structures never leave your browser.

Common use cases

check_circleBeautify Bootstrap 5 _variables.scss customised for a project theme
check_circleFormat Bulma, Foundation, or Materialize SCSS overrides
check_circleReformat SCSS exported from a design tool or Figma plugin
check_circleNormalise nesting depth across a team codebase before commit
check_circleClean up minified SCSS from a production build for debugging
check_circleBeautify an SCSS mixin library for documentation
check_circleFormat SCSS pasted from Stack Overflow to match project style
check_circleReformat SCSS after a sass-migrator import-to-use migration

Online formatter vs Prettier vs stylelint

An online formatter is the fastest option for one-off snippets — paste, click, copy. Prettier is the right tool for project-wide enforcement: configure .prettierrc and a pre-commit hook so every .scss file is formatted on save. stylelint with stylelint-config-standard-scss goes further — it lints for invalid syntax, unused variables, BEM naming, and forbidden nesting depth. Use this online tool for quick paste-and-format; use Prettier + stylelint together in CI.

More than formatting

Convert SCSS to plain CSS, LESS, or back — all browser-side.

SCSS to CSS SCSS to LESS CSS to SCSS

Frequently Asked Questions

How are nested SCSS rules indented?

Each level of nesting adds one indent (2 spaces by default — the dominant SCSS convention used by Bootstrap, Bulma, and most design systems). The opening brace stays on the selector line, the body indents one level, and the closing brace returns to the parent indent. This matches Prettier and stylelint defaults. Avoid nesting more than 3-4 levels deep — it makes the output CSS unreadable and breaks the BEM convention.

How are $variables formatted?

SCSS $variables are declared one per line with a space after the colon: $primary: #3b82f6;. Group related variables (colors, typography, spacing, breakpoints) and separate groups with a blank line. Modern Sass favours @use with namespace prefixes (e.g., @use "colors"; .x { color: colors.$primary; }) over global $variables — the formatter preserves whichever convention you use.

How are @mixin and @include formatted?

@mixin definitions follow the same brace-and-indent rule as selectors: @mixin button($color) { ... }. @include calls fit on one line if short (@include button(red);), or wrap arguments across multiple lines if they exceed the column limit. Mixins with @content blocks use a trailing block: @include media-query(md) { font-size: 1.25rem; }. The formatter preserves all three forms.

Should I use @use or @import?

@use is the modern syntax — Dart Sass deprecated @import in 2021 and will remove it. @use creates a namespace (use "colors" makes variables available as colors.$primary), prevents global pollution, and runs each file once. The formatter preserves whichever you use, but new projects should adopt @use exclusively. Run sass-migrator import to convert legacy @import to @use.

Does formatting SCSS change the compiled CSS?

No. Formatting only changes whitespace in the SCSS source. dart-sass produces byte-identical CSS output from formatted and unformatted input — variables, nesting, mixins, @use, @forward, and @extend resolve identically regardless of source whitespace.

How are parent-selector references (&) formatted?

& references stay on a new indented line under the parent selector. Common patterns: &:hover, &.active, &--modifier (BEM), and trailing patterns like .parent &. The formatter never inlines & references on the same line as the parent — keeping them as separate nested rules makes the structure clearer to read.

Is the SCSS I paste sent to your servers?

No. Formatting runs entirely in your browser using JavaScript. Stylesheets containing internal design-token names, brand colors, or proprietary class structures never leave your device. Open DevTools → Network and click Format to verify.

Should I use SCSS or CSS Nesting in 2026?

Native CSS Nesting is now supported in all evergreen browsers (Chrome 120+, Firefox 117+, Safari 16.5+) — for many projects, you no longer need a preprocessor. SCSS still wins when you need @mixin (CSS has no equivalent), @function, math operations, or @use for module organisation. New projects with simple nesting can use plain CSS; design systems and large codebases still benefit from SCSS.