, ,

[Front-End General] sass-lint: .sass/.scss ファイルを lint する

公開日: 2016/03/29
更新日: 2018/12/26

css-lint から乗り換えを検討。

[markdown]
sass-lint は、`.sass` と `.scss`、つまり SASS 記法と SCSS記法の両方に対応。

> * [sasstools/sass-lint: Pure Node.js Sass linting](https://github.com/sasstools/sass-lint)

しばらく放置していたものを自己解決した。

## Install

プロジェクト内で利用する場合。

“`prettyprinted
% npm install sass-lint –save-dev
“`

### IDE

例えば atom に導入するには、下記でインストール。

“`prettyprinted
% apm install linter-sass-lint
“`

が、うまく動いていないように見える。保留。

## Config

下記のサンプルから `.sass-lint.yml` ファイルを作成。

> * [sass-lint/sass-lint.yml at develop · sasstools/sass-lint](https://github.com/sasstools/sass-lint/blob/develop/docs/sass-lint.yml)

“`yaml
#########################
## Sample Sass Lint File
#########################
# Linter Options
options:
# Don’t merge default rules
merge-default-rules: false
# Set the formatter to ‘html’
formatter: html
# Output file instead of logging results
output-file: ‘linters/sass-lint.html’
# File Options
files:
include: ‘source/stylesheets/**/*.s+(a|c)ss’
ignore:
– ‘source/stylesheets/foundations/**/*.*’
# Rule Configuration
rules:
extends-before-mixins: 2
extends-before-declarations: 2
:
“`

### Converter

.scss-lint.yml からのコンバーターがある。

> * [sasstools.github.io/make-sass-lint-config/](http://sasstools.github.io/make-sass-lint-config/)

## Usage

CLI での実行は、下記オプション付きだった。
わかりにくい。

> * [CLI is broken? · Issue #500 · sasstools/sass-lint](https://github.com/sasstools/sass-lint/issues/500)
下記の場合、error が html ファイルで出力される。

“`prettyprinted
% $(npm bin)/sass-lint -c .sass-lint.yml -q -v
Output successfully written to /Users/****/projects/****/linters/sass-lint.html
“`

[公式で紹介されている標準設定ファイル](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml)のように、CLI 上に出力するよう `formatter: stylish` へ設定を変更する。

“`yaml
#########################
## Sample Sass Lint File
#########################
# Linter Options
options:
# Don’t merge default rules
merge-default-rules: false
# Set the formatter to ‘stylish’
formatter: stylish
# File Options
files:
include: ‘source/stylesheets/**/*.s+(a|c)ss’
ignore:
– ‘source/stylesheets/foundations/**/*.*’
# Rule Configuration
rules:
extends-before-mixins: 2
extends-before-declarations: 2
:
“`

実行。

“`prettyprinted
% $(npm bin)/sass-lint -c .sass-lint.yml -q -v
source/stylesheets/all.css.sass
23:1 error Indentation of 0, expected 2 indentation
24:1 error Indentation of 0, expected 4 indentation
source/stylesheets/layouts/_footer.sass
7:1 error Indentation of 0, expected 2 indentation
7:27 error Hex notation should all be upper case hex-notation
10:1 error Indentation of 0, expected 4 indentation
10:14 error Hex notation should all be upper case hex-notation
13:1 error Indentation of 0, expected 4 indentation
22:1 error Indentation of 0, expected 2 indentation
24:12 error Hex notation should all be upper case hex-notation
“`

何とか動かせるようになったが、sass-lint のエラーが分かりづらく、運用でつまづいて手間取りそう。
SASS 記法を止めて、SCSS 記法へするかな。

## 補遺

> * [5年モノのサービスに1ヶ月で Sass(SCSS) を導入したお話 – メドピア開発者ブログ](http://tech.medpeer.co.jp/entry/2016/01/29/113000)
>
> SCSS の lint ツールは幾つかありましたが、コード内で特定箇所のみルールの除外が可能だった為 Ruby 実装ではありますが scss-lint にしました。
> できれば Node.js だけで完結したかったのですが、Node.js 実装の lint ツールは現時点ではルールの除外ができなかったり、CLI 出力やオプション設定などで総合的に満足いくものが現状ありませんでした。
[/markdown]