Sassを使いたいけど、周りは使ってないのでなかなか使えなかったのですが、今回初めて業務でSassを使いました。 状況にもよりますが、今回はがっつりベースからすべてコーディングすることになっていたのでSassを使うことにしました。

そこで気をつけたかったのが、CSSにコンパイルしたときのコードの見やすさ。 今後、他の人が編集したときにも使いやすいCSSを心がけました。 今回はそこで気をつけたことをまとめます。

config.rbの設定をする

config.rbに以下の記述をします。

output_style = expanded
line_comments = false

outputstyleはexpandedにします。expandedにするとコンパイル時にしっかりと改行、インデントされた状態になります。 それからlinecommentsはcssしか触らない人に取っては邪魔なのでfalseに設定します。

ネスト(入れ子)しすぎない

Sassはネストして書けるので構造が分かりやすいですがネストが深くなればなるほど、コンパイルしたときのセレクタが長くなります。 なるべくネストは深くなりすぎないように自分でルールをつくるなどして深くなりすぎない工夫をしました。

@extendをうまく使う

@extendをつかうとコンパイルしたときに@extendしたコードをひとまとめにしてくれます。

.box{
   width: 100px;
   height: 100px;
   margin: 0 auto;
}

.red-box{
  @extend .box;
  color: red;
}

コンパイルすると以下の通りになります。

.box,.red-box{
   width: 100px;
   height: 100px;
   margin: 0 auto;
}

.red-box{
  color: red;
}

.boxと.red-boxは同じプロパティが適応されるようにひとまとめにコードが吐き出されます。 同じ記述を何回もする必要がある場合は@extendを使うことで短くまとめて書くことが出来ます。

またプレースホルダー(%)を使うとそのコード自体は吐き出されないようにすることも出来ます。

%box{
   width: 100px;
   height: 100px;
   margin: 0 auto;
}

.red-box{
  @extend %box;
  color: red;
}

.green-box{
  @extend %box;
  color: green;
}

コンパイルすると以下の通りになります。

.red-box,.green-box{
   width: 100px;
   height: 100px;
   margin: 0 auto;
}

.red-box{
  color: green;
}

.green-box{
  color: red;
}

%boxはコンパイル時には吐き出されず、.red-box,.green-boxに%boxのプロパティが適応されました。 このように、何回も同じ記述をする場所や、スタイルを引き継ぎたい場所にうまく使うとコードがシンプルになります。

コメントアウトを使い分ける

/* コンパイル時に書き出される */

//コンパイル時に書き出されない

コンパイルしたときに書き出したいコメントと、書き出したくないコメントはかき分けました。 具体的には、変数や、mixinに関するコメントはCSSでは関係ないので下のコメントを使って書きました。

まとめ

sassで構築をして、sassを知らない人が触る時にはcssを触ってもらえば、問題なく使用することが出来ます。 コンパイル時の書き出され方を意識さえすれば、相手がsassを知らなくても使うことはできるなと感じました。 今後はもうちょい積極的にsassを使っていきたいなと思いました。