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; color: red; background: blue;
}

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

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; color: #333; background: white;
}

Expanded

Each property on its own line — traditional style.

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

Minify

Everything compressed.

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

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.printWidth | 0 | Max line length in inline mode (0 = unlimited) | | scssPrettier.quoteStyle | "preserve" | preserve / single / double | | scssPrettier.sortEnabled | true | Sort properties (false keeps the written order) | | scssPrettier.exclude | [] | File patterns to skip | | scssPrettier.debugJson | false | Export AST to JSON |

Workspace Config (.scssPrettier.json)

Put a config file in your project so the editor, the CLI and the LSP server all format the same way. It accepts the same keys as the VS Code settings (without the scssPrettier. prefix):

{
  "formatMode": "expanded",
  "indentSize": 2,
  "quoteStyle": "single",
  "propsPriority": ["position", "display", "width", "height", "padding", "margin"],
  "exclude": ["**/vendor/**"]
}

The nearest .scssPrettier.json above the file being formatted is used.

Priority: CLI flags > .scssPrettier.json > VS Code settings > Defaults

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; }

Declarations that only partly overlap (border-left and border-color, padding-block and padding-top, …) keep the order you wrote them in, because swapping them would change the result.

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)