SideCI Blog

自動コードレビューサービスSideCIを提供している株式会社アクトキャットのコーポレートブログです。



SCSSの静的解析、改善にscss-lintを使いましょう

コードレビューというとプログラマ向けの仕組みに感じますが、そんなことはありません。Webデザイナーにとっても役立つケースがあります。例えばCSSはテキストで書かれるものなので差分が取れます。更新部分だけをコードレビューできれば、日々の運用の中でメンテナンス性を維持できます。

CSSを拡張して書けるようにしたSCSSはWebデザイナーの中でも広く使われています。開発の中でSCSSを使われているのであれば、scss-lintを使ってコードをチェックしてみましょう。

scss-lintのインストール

scss-lintはRubygemsを使ってインストールできます。

$ gem install scss-lint

これで scss-lint コマンドが使えるようになります。開発チームで実際に導入される際には Gemfile に追記し、bundlerで管理すると全員で同じバージョンのものを使えるので便利です。

scss-lintの使い方

scss-lintの使い方は簡単で、SCSSファイルのあるディレクトリまたはファイルを指定するだけです。実行すると、解析された結果が標準出力されます。

$ scss-lint app/assets/stylesheets/
app/assets/stylesheets/jobs.css.scss:2:21 [W] HexNotation: Color `#EAEAEA` should be written as `#eaeaea`
app/assets/stylesheets/jobs.css.scss:2:21 [W] ColorVariable: Color literals like `#EAEAEA` should only be used in variable declarations; they should be referred to via variable everywhere else.
app/assets/stylesheets/jobs.css.scss:4:11 [W] ZeroUnit: `0px` should be written without units as `0`
app/assets/stylesheets/jobs.css.scss:12:3 [W] PropertySortOrder: Properties should be ordered background-color, font-family, padding
app/assets/stylesheets/jobs.css.scss:14:21 [W] ColorVariable: Color literals like `white` should only be used in variable declarations; they should be referred to via variable everywhere else.

エラー項目の指摘と同時にどう修正すれば良いかも出してくれるのが便利です。

表示結果について

表示結果は --format オプションで変更できます。例えばよくあるエラーをリストアップには Stats を指定します。そうすると以下のように多いエラー順で一覧にしてくれます。

$ scss-lint --format Stats app/assets/stylesheets/
238  SpaceAfterPropertyColon        (across  6 files)
162  SpaceBeforeBrace               (across 10 files)
 92  ColorVariable                  (across  8 files)
 51  PseudoElement                  (across  5 files)
 50  SingleLinePerSelector          (across  9 files)

Files を指定すると単にエラーのあるファイル名だけを標準出力します。

$ scss-lint --format Files app/assets/stylesheets/
app/assets/stylesheets/application.css
app/assets/stylesheets/bootstrap-notify.css
app/assets/stylesheets/bootstrap-responsive.min.css
app/assets/stylesheets/bootstrap-tagmanager.css
app/assets/stylesheets/bootstrap.min.css

TAP は一つ一つのエラーを分割し、より細かく内容を出力してください。

$ scss-lint --format TAP app/assets/stylesheets/ | more
TAP version 13
1..9514
ok 1 - app/assets/stylesheets/ads.css.scss
ok 2 - app/assets/stylesheets/api/ads.css.scss
ok 3 - app/assets/stylesheets/api/articles.css.scss
ok 4 - app/assets/stylesheets/api/users.css.scss
not ok 5 - app/assets/stylesheets/application.css:1:1 Comment
  ---
  message: Use `//` comments everywhere
  severity: warning
  file: app/assets/stylesheets/application.css
  line: 1
  column: 1
  name: Comment
  ...
not ok 6 - app/assets/stylesheets/application.css:23:1 SingleLinePerSelector
  ---
  message: Each selector in a comma sequence should be on its own single line
  severity: warning
  file: app/assets/stylesheets/application.css
  line: 23
  column: 1
  name: SingleLinePerSelector
  ...

チェックできる内容について

あらかじめ用意されているチェック項目(Linter)は --show-linters オプションで確認できます。

$ scss-lint --show-linters
Installed linters:
 - BangFormat
 - BemDepth
 - BorderZero
 - ChainedClasses
 - ColorKeyword
 - ColorVariable
 - Comment
   :

設定について

scss-lint の設定は .scss-lint.yml というファイルで行います。例えば以下のような記述になります。

scss_files: 'app/assets/stylesheets/**/*.css.scss'

exclude: 'app/assets/stylesheets/plugins/**'

linters:
  BorderZero:
    enabled: false

  Indentation:
    exclude:
      - 'path/to/file.scss'
      - 'path/to/directory/**'
    severity: warning
    width: 2

解析するファイルやディレクトリも指定するので、設定ファイルさえ書いておけば scss-lint コマンドだけで済むようになります。そして前述したチェック項目(Linter)ごとに有効/無効を設定したり、除外するディレクトリやファイルを細かく指定できます。


CSSは構造化ができなかったり、変数でまとめて管理するようなことができないためにSCSSやStylusといった拡張言語が生み出されています。それらを使うことで管理しやすくなりますが、それでも継続的に更新していく中で全体のメンテナンス性が悪くなっていくのはよくあることです。そういった事態に陥らないようscss-lintを使ってメンテナンス性を維持するのは大切です。

SideCIはscss-lintに対応していますので、チームで開発されている際にはぜひ導入を検討してみてください。Pull RequestベースでSCSSファイルを検証し、自動コードレビューできるようになります。

無料トライアルも提供していますので、ぜひお試しください。