scss-lintの導入方法とその紹介 - Clueit Developersブログ

エンジニアの井戸田です。

今回は自分たちが導入した scss-lint についての実装方法を紹介したいと思います！ scss-lint とはCSS拡張メタ言語 scss のRuby製解析ツールで、 scss のコードが設定に違反していた場合、警告をしてくれるツールです。ついfatになってしまいがちで、１度書いてしまうと中々修正しにくいcssですが、 scss-lint を使用することにより、統一感を持ったコードになり、リファクタリング時にも修正がしやすいと思います。

scss-lint

インストール

$ gem install scss_lint

また Gimfile に以下を入力して bundle install でインストールすることができます。

gem 'scss_lint', require: false

実行方法

スキャンするディレクトリまたはファイル名をコマンドラインに渡すことによって、scss-lint を実行することができます。

$ scss-lint app/assets/stylesheets/

$ scss-lint app/assets/stylesheets/base.scss

またオプションで -v/--version でバージョンを確認することができます。様々なオプションがあるので、上記のURLからご覧ください。

$ scss-lint -v/--version

実装

scss-lint はデフォルトで下記のような設定になっています。

scss/config/default.yml

この設定の中で、自分たちが不必要だと思う設定に対して、ホームディレクトリに .scss.yml をいうファイルを作成し記述することで、その設定を無効化していきます。

.scss.yml の記述例

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

linters:
  ColorVariable:
    enabled: false

exclude : スキャンして欲しくないディレクトリまたはファイルを記載します。
linters : linters: 以下に無効化したい設定を記述していきます。
- enabled : こちらには linter を実行するかどうかを true または false で記述していきます。上記の設定は ColorVariable を enables: false と記述しており、ColorVariable という設定を無効化させています。

設定の紹介

下記のURLに各設定の内容が記述されています。ここで自分たちが重要だと思った設定をいくつか紹介していきたいと思います。
https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md

EmptyLineBetweenBlocks

個別のルール、機能、@mixin宣言の後に空行をいれるという設定です。このようにすることでコードが一気に見やすくなります。

// Bad

div {
  margin: 10px;
  a {
  
    ...
  }
}
p {
  margin: 0;
}

// Good

div {
  margin: 10px;
  
  a {
    ...
  }
}

p {
  margin: 0;
}

EmptyRule

空のルールがある場合警告するという設定です。つい見逃してしまいがちですが、この設定で気付くことができますね。

// Bad

p {
}

HexLength

短い又は長いスタイルオプションを設定することすることができます。

color: #ffffff;

color: #fff;

設定オプション	項目
`style`	`short` 又は `long` （default: `short`）

ImportantRule

!important を使用しないという項目です。つい使ってしまいがちの !important ですが使用することで、脆いコードになってしまいます。なので弊社では使用しないようにしています。

// Bad

p {
  color: #f00 !important;
}

MergeableSelector

同じ深さで２度同じプロパティを使わないという設定です。

// Bad

h1 {
  margin: 10px;
}

.baz {
  color: red;
}

h1 {
  text-transform: uppercase;
}


h1.new {
  color: #000;
}

// Good

h1 {
  margin: 10px;
  text-transform: uppercase;
  
  &.new {
    color: #000;
  }
}

.baz {
  color: red;
}

PropertySortOrder

記入するプロパティの順番を決めます。自分の好きな順番にカスタマイズすることもできますが、下記のように記載することで元々設定されている smacss の順番にすることができます。

  PropertySortOrder:
    order: smacss

また smacss　以外にも concentric , recess などがありプロパティの順番については以下のURLからご覧ください。
property-sort-orders

Shorthand

サポートするプロパティに可能な最も短い表記で書くという設定です。

// Bad

margin: 1px 1px 1px 1px;

margin: 1px 0 1px 0;

margin: 1px 1px 0 1px;

// Good

margin: 1px;

margin: 1px 0;

margin: 1px 1px 0;

UnnecessaryParentReference

不要な時に親セレクタ（ & ）を使用しないという設定です。

// Bad

div {
  & > a {
    ...
  }
}

// Good

div {
  > a {
    ...
  }
}

ZeroUnit

値が0の時には単位を省略するという設定です。

// Bad

p {
  margin: 0px;
}

// God

p {
  margin: 0;
}

最後に

今回は「scss-lintの導入方法とその紹介」でした。 scssを使って実装されている方がいましたらぜひ導入してみてください。開発が複数人いる企業にとって統一感をもったコードを書くのは難しいですが、こちらを導入することで、皆同じ記述で実装ができレビュー時も見やすくなると思います。紹介した設定の他にも scss-lint には様々な設定があるので、ぜひ調べてみてください。最後まで読んでいただきありがとうございます。　井戸田

参考文献

scss-lint