Ruby製のscss-lintはscssのコードを検査して設定と異なる場合は警告してくれるツールです。ルールを記述する設定ファイルは拡張子ymlのファイルで作成します。githubで公開されているデフォルトの設定は以下の通りです。
https://github.com/sds/scss-lint/blob/master/config/default.yml
このデフォルトの設定を、制作するサイトに合わせてカスタマイズします。default.ymlの内容を編集し、独自の設定ファイルとしてscss-lint.ymlにリネームして使用します。
scss-lintで検査するファイルは拡張子がscssのファイル全てですが、excludeにスキャンして欲しくないディレクトリまたはファイルを指定することができます。以下はアイコンフォントのディレクトリ内のscssファイルを検査対象外としています。
#ignore folders.
exclude: ["src/scss/icomoon/**"]以下はscss-lint.ymlで使用頻度の高い設定ルールです。
■ BorderZero
borderを非表示にする場合は0かnoneが指定できますが、どちらかに統一できます。以下は0で統一する場合です。
# borderが0pxのときの記述チェック
BorderZero:
enabled: true
convention: zero # or `none`■ ColorVariable
色指定は$whiteのように定義された変数を使用します。#fffのようにカラーコードを直接指定するとエラーになります。
# カラー設定に変数を使う
ColorVariable:
enabled: true■ DeclarationOrder
scssのコードを記述する順序を決めます。@extend、@include、通常のセレクタ、入れ子のセレクタの順番に記述します。
# 宣言の順序は@extend、@include、通常のセレクタ、入れ子のセレクタとする
DeclarationOrder:
enabled: true■ DuplicateProperty
プロパティの重複を禁止します。ただし同じ装飾でもプロパティ名が異なる場合、例えばmargin-bottom: 10px;とmargin: 0 0 10px;を記述してもエラーにはなりません。なお、ignore_consecutive:で重複禁止から除外するプロパティを指定できます。
# プロパティの重複を禁止。禁止から除外する場合はignore_consecutive:で除外プロパティを指定
DuplicateProperty:
enabled: true
ignore_consecutive:
- background
- transition■ EmptyLineBetweenBlocks
ブロック毎に改行を入れてコードの可読性を向上させます。
# ブロック毎に改行を入れる
EmptyLineBetweenBlocks:
enabled: true
ignore_single_line_blocks: true■ EmptyRule
プロパティの指定がない空のブロックはエラーになります。
# 中身が空のcssを許可しない
EmptyRule:
enabled: true■ FinalNewline
scssファイルのコードの最終行に空の1行を入れます。
# 最終行に１行入れる
FinalNewline:
enabled: true
present: true■ HexNotation
カラーコードに設定する英字は#cccのように小文字を使用します。#CCCのように大文字を使用するとエラーになります。
# colorを16進数で設定する際の大文字と小文字を設定
HexNotation:
enabled: true
style: lowercase # or 'uppercase'■ IdSelector
idをセレクタとして使用するとエラーになります。
# idセレクタの使用を禁止
IdSelector:
enabled: true■ ImportantRule
!importantを使用するとエラーになります。
# !importantの使用を禁止
ImportantRule:
enabled: true■ LeadingZero
小数点以前が0の場合、opacity: .8;のように0を省略して記述します。opacity: 0.8;のように記述するとエラーになります。
# 小数点以前が0だった場合、0の表記を許可しない
LeadingZero:
enabled: true
style: exclude_zero # or 'include_zero' # 0を除外するか、含めるか設定■ MergeableSelector
1つのscssファイル内で同じセレクタを重複して使用するとエラーになります。例えば以下のような記述も「.root」の部分が重複しているためエラーです。
.root {
margin-top: 10px;
}
.root .bnr {
text-align: center;
} # １ファイルの中での同じセレクタを重複使用することを禁止
MergeableSelector:
enabled: true
force_nesting: true # ネストできるcssがネストされていることを確認する
whitelist: # 重複を許可するセレクタを設定 ex. ['a .foo', '.foo']■ NestingDepth
ネストの最大深度を設定します。最大深度を8にした場合、以下のように深度が9以上になるとエラーです。
.box01 {
&-box02 {
&-box03 {
&-box04 {
&-box05 {
&-box06 {
&-box07 {
&-box08 {
&-box09 {
display: none;
}
}
}
}
}
}
}
}
} # ネストの深度
NestingDepth:
enabled: true
max_depth: 8 # 最大深度
ignore_parent_selectors: false # 親セレクタのエラーを報告するかどうか■ PropertySpelling
プロパティのスペルチェックをします。displaay: none;のようにスペルミスがあるとエラーになります。
# プロパティのスペルチェック
PropertySpelling:
enabled: true
extra_properties: [] # 追加するプロパティ
disabled_properties: [] # 無視するプロパティ■ SelectorDepth
セレクタの最大深度を設定します。最大深度を4にした場合、以下のように深度が5以上になるとエラーです。
.root .box {
ul {
li {
a {
display: block;
}
}
}
} # セレクタの深度 ex. .one .two .three {...}
SelectorDepth:
enabled: true
max_depth: 4 # 最大深度■ SpaceAfterPropertyColon
プロパティのコロン後のスペースを設定します。スペース１つ、スペースなし、スペース１つ以上から選択できますが、通常スペース1つで設定します。以下のようにスペース1つで設定しているのに、スペースがない場合はエラーになります。
.box {
margin:0;
} # プロパティのコロン後のスペース ex. margin: 0;
SpaceAfterPropertyColon:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'■ TrailingSemicolon
プロパティはスペースなしのセミコロンで閉じます。以下のようにプロパティとセミコロンの間にスペースがあるとエラーになります。
.box {
margin: 0 ;
} # プロパティはスペースなしのセミコロンで閉じる
TrailingSemicolon:
enabled: true■ TrailingWhitespace
末尾に空白（半角スペースやタブ）がある行を禁止します。以下のように不要な半角スペースを含む空白行があるとエラーになります。空白行以外でも末尾に半角スペースのある行が存在すればエラーになります。ただし空白（半角スペースやタブ）を含まない空白行はエラーになりません。
.box {
margin: 0;
} # 末尾に空白がある行を禁止
TrailingWhitespace:
enabled: true
