https://github.com/matype/scssfmt
Standard SCSS code formatter
https://github.com/matype/scssfmt
beautifier css formatter sass scss
Last synced: over 1 year ago
JSON representation
Standard SCSS code formatter
- Host: GitHub
- URL: https://github.com/matype/scssfmt
- Owner: matype
- License: other
- Created: 2017-05-15T12:51:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-08T03:48:47.000Z (over 7 years ago)
- Last Synced: 2025-03-17T18:53:50.521Z (over 1 year ago)
- Topics: beautifier, css, formatter, sass, scss
- Language: JavaScript
- Homepage:
- Size: 1.51 MB
- Stars: 57
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
> Standard SCSS code formatter
## 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
```js
const fs = require('fs')
const scssfmt = require('scssfmt')
const css = fs.readFileSync('example.css', 'utf-8')
const formatted = scssfmt(css)
```
### PostCSS plugin
```js
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](https://github.com/morishitter/scssfmt/tree/master/test/fixtures).
## License
The MIT License (MIT)
Copyright (c) 2017 Masaaki Morishita