Standard SCSS code formatter
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs Refactor Jun 29, 2017
test Format spaces between a value and important keyword Jun 5, 2017
.editorconfig Initial commit May 15, 2017
.gitignore Setup to build landing pages May 28, 2017
.npmignore Update .npmignore May 31, 2017
.travis.yml Drop node v7 and add v8 May 31, 2017
CHANGELOG.md Update CHANGELOG Mar 13, 2018
LICENSE Initial commit May 15, 2017
README.md Fix the link to David Jun 30, 2017
cli.js Fix #13 Jan 15, 2018
index.js Refactor Mar 13, 2018
package.json 1.0.6 Mar 13, 2018
yarn.lock Upgrade dependencies Mar 13, 2018

README.md

Standard SCSS code formatter


Build Status NPM Version Dependency Status License

Installation

$ npm install scssfmt

Install to global (If you install scssfmt global, you can use it easily in CLI):

$ npm install -g scssfmt

Usage

in Command Line

Simple usage:

$ scssfmt input.css output.css

--watch

Watch one file:

$ scssfmt --watch input.css

Watch multiple files by glob:

$ scssfmt --watch 'app/assets/stylesheets/**/*.scss'

with --ignore option:

$ scssfmt --watch 'app/assets/stylesheets/**/*.scss' --ignore app/assets/stylesheets/ignore.css

also can use specify multiple files by glob:

$ scssfmt --watch 'app/assets/stylesheets/**/*.scss' --ignore 'app/assets/stylesheets/ignore/**/*'

--recursive

Format multiple files by glob:

$ scssfmt --recursive 'app/assets/stylesheets/**/*.scss'

--diff

Show diff (don't change code):

$ scssfmt input.css --diff

--help

CLI help:

$ scssfmt --help
Usage: scssfmt [options] input-name [output-name]

Options:

  -w, --watch            Watch directories or files
  -d, --diff             Output diff against original file
  -r, --recursive        Format list of space seperated files(globs) in place
  -v, --version          Output the version number
  -h, --help             Output usage information
  --stdin-filename       A filename to assign stdin input.

Use stdin as inputs

scssfmt can also read a file from stdin if there are no input-file as argument in CLI.

$ cat input.css | scssfmt --stdin-filename input.css

Node.js

const fs = require('fs')
const scssfmt = require('scssfmt')

const css = fs.readFileSync('example.css', 'utf-8')
const formatted = scssfmt(css)

PostCSS plugin

const fs = require('fs')
const scssfmt = require('scssfmt')

const css = fs.readFileSync('example.css', 'utf-8')
postcss([scssfmt.plugin()])
  .process(css, {syntax: scss})
  .then(result => {
    const formatted = result.css
  })

Rules for formatting

  • 2 spaces indentation
  • require 1 space between a simple selector and combinator
  • require new line between selectors
  • require 1 space between selectors and {
  • require new line after {
  • disallow any spaces between property and :
  • require 1 space between : and values
  • require a new line after declarations at least
  • require ; in last declaration
  • require 1 space between values and !important
  • Do not format any spaces between rules
  • Do not format any spaces between a rule and a comment
  • require 1 space between a value and !important
  • require 1 space between @mixin and mixin name
  • require 1 space between mixin name and (
  • require 1 space between @extend and base rules
  • require 1 space between @include and mixin name
  • disallow any spaces between $variable and :
  • require 1 space between : and name of variable
  • Do not format any spaces before @else

Examples

See tests.

License

The MIT License (MIT)

Copyright (c) 2017 Masaaki Morishita