Sass Formatter

Website sass-formatter.syler.de

Used in

• Vscode sass extension

Usage

import { SassFormatter } from 'sass-formatter';

const result = SassFormatter.Format(
  `
    span
      color: none

      @for $i from 0 through 2
         
          &:nth-child(#{$i})
              color: none
          @each $author in $list
              .photo-#{$author}
                background: image-url("avatars/#{$author}.png") no-repeat

    @while $types > 0
          .while-#{$types}
 width: $type-width + $types`
);

Result

span
  color: none

  @for $i from 0 through 2

    &:nth-child(#{$i})
      color: none
      @each $author in $list
        .photo-#{$author}
          background: image-url("avatars/#{$author}.png") no-repeat

    @while $types > 0
      .while-#{$types}
        width: $type-width + $types

CLI

Sass Formatter includes a command-line interface for formatting directly from editors or CI.

# show help
$ sass-formatter --help

# rewrite files in place
$ sass-formatter -w src/styles/main.scss

# check formatting without writing
$ sass-formatter -ch "src/**/*.sass"

# use custom config file
$ sass-formatter -c ./my-config.json src/**/*.scss

Options summary:

-w, --write                 Rewrite the file after formatting
-ch, --check                Check if the file is formatted
-d, --default-config        Show default config
-c, --config <Path>         Use custom config file (JSON)
-h, --help                  Print this help

Notes:

• By default loads .sassformatterrc.json from PWD.
• Config is merged with defaults; missing keys are taken from defaults.
• Unknown keys trigger warnings; invalid values trigger exit code 1.
• Supports formatting: sass, scss, css, less.

Docs

• config

  • SassFormatterConfig
  • defaultSassFormatterConfig

config

SassFormatterConfig

interface SassFormatterConfig {
    /**Enable debug messages */
    debug: boolean;
    /**delete rows that are empty. */
    deleteEmptyRows: boolean;
    /**@deprecated*/
    deleteWhitespace: boolean;
    /**Convert css or scss to sass */
    convert: boolean;
    /**set the space after the colon of a property to one.*/
    setPropertySpace: boolean;
    tabSize: number;
    /**insert spaces or tabs. */
    insertSpaces: boolean;
    /**Defaults to LF*/
    lineEnding: 'LF' | 'CRLF';
}

defaultSassFormatterConfig

const defaultSassFormatterConfig: SassFormatterConfig;

Generated with suf-cli

.sassformatterrc.json

{
  "insertSpaces": true,
  "tabSize": 2,
  "convert": true,
  "debug": false,
  "deleteEmptyRows": true,
  "deleteWhitespace": true,
  "setPropertySpace": true,
  "lineEnding": "LF"
}

Install

# install locally (recommended)
npm install --save-dev sass-formatter

# or globally
# npm install -g sass-formatter

# or run without install
# npx sass-formatter --help

License

Copyright (c) 2019 Leonard Grosoli Licensed under the MIT license.