scss-prettier

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

• Open Extensions (Ctrl+Shift+X)
• Search "SCSS Prettier"
• 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)