sass-lint

「sass-lint」はCSSのための静的検証ツールです。

🗻 インストール手順

sass-lintのインストールは次のコマンドです。

npm install sass-lint --save-dev

👽 設定手順

sass-lintの設定手順は.sass-lint.ymlに記述します。

# sass-lint configuration
options:
  merge-default-rules: false
  max-warnings: 50
files:
  include: 'app/assets/stylesheets/**/*.s+(a|c)ss'
rules:
  extends-before-mixins: 2
  extends-before-declarations: 2
  placeholder-in-extend: 2
  mixins-before-declarations:
    - 2
    -
      exclude:
        - breakpoint
        - mq

  no-warn: 1
  no-debug: 1
  no-ids: 2
  no-important: 2
  hex-notation:
    - 2
    -
      style: uppercase
  indentation:
    - 2
    -
      size: 2
  property-sort-order:
    - 1
    -
      order:
        - display
        - margin
      ignore-custom-properties: true

package.jsonに実行コマンドを追加します。

"scripts": {
  "sass-lint": "sass-lint -c .sass-lint.yml -v"
}

🐠 sass-lintによるチェック

sass-lintによるチェックは次のコマンドで行います。

npm run sass-lint

チェック結果は次のようにわかりやすい形で出力されます。

product.scss
  26:5   warning  Expected `display`, found `background`  property-sort-order
  26:17  error    Hex notation should all be upper case   hex-notation

🐰 補足：Werckerとの連携

CIツール「Wercker」でESLintを実行するための設定は次のとおりです。

sasslint:
  steps:
    - bundle-install:
      jobs: 4

    - install-packages:
      name: Install node.js, build-essential, libpq-dev
      packages: build-essential libpq-dev nodejs npm nodejs-legacy

    - script:
      name: NPM install
      code: npm install -D

    - script:
      name: Run sass-lint
      code: npm run sass-lint