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

🐹 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)