SCSS Prettier

Professional CSS/SCSS/LESS formatter with property sorting, inline & expanded modes, and smart cascade protection.

The only formatter that combines property sorting + inline formatting in a single tool — no extra plugins or config needed.

Why SCSS Prettier?

| Feature | Tool A | Tool B | Tool C | SCSS Prettier | |---------|:------:|:------:|:------:|:-----------------:| | Property Sorting | No | Plugin | Dead | Built-in | | Inline Mode | No | No | Yes | Yes (default) | | Expanded Mode | Yes | N/A | Yes | Yes | | Zero Config | Yes | No | No | Yes | | SCSS Deep Support | Good | Good | Outdated | Excellent | | Format on Save | Yes | Partial | Dead | Yes | | Cascade Protection | No | No | No | Yes | | Active Maintenance | Yes | Yes | No | Yes |

Inline Formatting

Property Sorting

Quick Start

Install → Save → Done.

/* Before - messy properties */
.box { color: red; padding: 10px; background: blue; display: flex; margin: 5px; }

/* After - Ctrl+S */
.box { display: flex; padding: 10px; margin: 5px; background: blue; color: red; }

Properties are automatically sorted: position → display → width → padding → margin → background → color

Installation

VS Code Marketplace

1. Open Extensions (Ctrl+Shift+X)
2. Search "SCSS Prettier"
3. Click Install

Command Line

code --install-extension Drangon-Knight.scss-prettier

npm CLI

npm install -g scss-prettier
scss-prettier --write src/**/*.scss

Format Modes

Inline (Default)

Properties on one line — compact and scroll-efficient.

.card {
  display: flex; padding: 20px; margin: 10px; background: white; color: #333;
}

Expanded

Each property on its own line — traditional style.

.card {
  display: flex;
  padding: 20px;
  margin: 10px;
  background: white;
  color: #333;
}

Minify

Everything compressed.

.card{display:flex;padding:20px;margin:10px;background:white;color:#333;}

Set globally: "scssPrettier.formatMode": "expanded"

Override per-rule with ///expand or ///minify directives.

Sort Presets

| Preset | Order | |--------|-------| | default | Layout → Box Model → Typography → Visual → Animation | | alphabetical | A-Z | | concentric | Outside → Inside (position → margin → border → padding → dimensions) | | smacss | Display → Position → Box → Spacing → Border → Typography → Visual | | custom | Your own array via propsPriority |

{
  "scssPrettier.sortPreset": "concentric"
}

Configuration

VS Code Settings

| Setting | Default | Description | |---------|---------|-------------| | scssPrettier.enable | true | Enable/disable formatter | | scssPrettier.formatMode | "inline" | inline / expanded / minify | | scssPrettier.sortPreset | "default" | Sort order preset | | scssPrettier.indentSize | 2 | Spaces per indent level | | scssPrettier.propsPriority | null | Custom sort order array | | scssPrettier.groupSeparator | false | Blank lines between groups (expanded) | | scssPrettier.shorthandCascade | true | Protect shorthand/longhand order | | scssPrettier.removeEmptyRules | false | Remove empty rule blocks | | scssPrettier.duplicateProperties | "ignore" | ignore / warn / remove | | scssPrettier.exclude | [] | File patterns to skip | | scssPrettier.debugJson | false | Export AST to JSON |

Workspace Config (.scssPrettier.json)

{
  "propsPriority": ["position", "display", "width", "height", "padding", "margin"]
}

Priority: .scssPrettier.json > VS Code settings > Default preset

Features

Selector Formatting

/* Before */
h1,h2,h3,h4{margin:0;padding:0;}

/* After */
h1,
h2,
h3,
h4 {
  padding: 0; margin: 0;
}

Sass Map Formatting

/* Before */
$colors:(primary:#007bff,secondary:#6c757d,success:#28a745);

/* After */
$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

CSS Variable Preservation

Custom properties (--*) maintain their authored order in any selector.

Smart Cascade Protection

/* Shorthand always before longhand — cascade safe */
.box { margin: 10px; margin-left: 0; }

Vendor Prefix Grouping

/* Grouped together */
.box { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

Directives

///minify
.utility { display: flex; width: 100%; }
/* Output: .utility{display:flex;width:100%;} */

///expand
.detailed { display: flex; width: 100%; }
/* Output: Each property on its own line */

Deep SCSS Support

• $variables and #{interpolation} preservation
• @include, @extend, @use, @forward handling
• @keyframes proper formatting
• @font-face auto-expand
• Nested rules and & selectors

CLI Usage

# Format and write back
scss-prettier --write src/**/*.scss

# Check formatting (CI/CD)
scss-prettier --check "styles/**/*.css"

# Custom options
scss-prettier --mode expanded --preset concentric --indent 4 src/main.scss

# With config file
scss-prettier --write --config .scssPrettier.json "**/*.scss"

Git Hooks (lint-staged)

{
  "lint-staged": {
    "*.{scss,css,less}": "scss-prettier --write"
  }
}

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+S | Format on save (automatic) | | Ctrl+Alt+F | Format current document | | Shift+Alt+F | Format document (VS Code standard) | | Status bar click | Toggle enable/disable |

Links

• VS Code Marketplace
• npm CLI

Created by DragonKnight (Daekyung Yoo)