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?

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

{
  "scssPrettier.sortPreset": "concentric"
}

Configuration

VS Code Settings

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

Links

• VS Code Marketplace
• npm CLI

Created by DragonKnight (Daekyung Yoo)