FreeOpen Contribution

SCSS Prettier

Sort, Format, Ship — All in One Formatter

Property sorting + inline/expanded formatting + cascade protection. Format on save, zero config. CSS, SCSS, and LESS.

Install Extension See Features

v4.0.0

Version

Free Forever

License

CSS / SCSS / LESS

Languages

Messy CSS In, Clean CSS Out

Properties auto-sorted by layout logic. Format on save.

Before

.card {
  color: red;
  padding: 10px;
  background: blue;
  display: flex;
  margin: 5px;
  border: 1px solid #ddd;
  font-size: 14px;
  position: relative;
}

After (Auto-Sorted)

/* Sorted: Layout → Box → Typography → Visual */
.card {
  position: relative;
  display: flex;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ddd;
  background: blue;
  color: red;
  font-size: 14px;
}

Everything You Need

📐

Property Sorting

5 built-in presets: Default, Alphabetical, Concentric, SMACSS, Custom.

🔄

3 Format Modes

Inline (compact), Expanded (one per line), Minify — switch instantly.

🛡️

Cascade Protection

Shorthand always before longhand. Never breaks CSS specificity.

⚡

Format on Save

Ctrl+S and done. Zero config required to start.

📁

Deep SCSS Support

Variables, nesting, mixins, interpolation, @use, @forward — all handled.

🔧

CLI + LSP

Terminal formatting for CI/CD. LSP server for any editor.

5 Sort Presets

Choose how properties are organized

PresetSort OrderBest For

DefaultLayout → Box → Typography → VisualMost projects

AlphabeticalA → ZSimple consistency

ConcentricOutside → InsideVisual reasoning

SMACSSDisplay → Position → Box → Border → TextSMACSS methodology

CustomYour own priority arrayTeam standards

3 Format Modes

Switch between compact, readable, and minified output

Inline

.card { position: relative; display: flex; padding: 10px; margin: 5px; }

Expanded

.card {
  position: relative;
  display: flex;
  padding: 10px;
  margin: 5px;
}

Minify

.card{position:relative;display:flex;padding:10px;margin:5px}

Get Started

Install

# VS Code
ext install Drangon-Knight.scss-prettier

# CLI
npm install -g scss-prettier
scss-prettier --write "src/**/*.scss"

# CI/CD check
scss-prettier --check "src/**/*.scss"

.scssPrettier.json

{
  "sortPreset": "default",
  "formatMode": "inline",
  "indentSize": 2,
  "shorthandCascade": true,
  "removeEmptyRules": false,
  "duplicateProperties": "warn"
}

License

SCSS Prettier is free for all developers. Proprietary software — free to use, not open source.

✓

Allowed

Use in any project — personal, commercial, enterprise. No limits.

✗

Restricted

No copying, modifying, or redistributing source code.

Stop Formatting CSS Manually

Install SCSS Prettier. Ctrl+S. Done. Free, no signup, no limits.

Install Extension