とりあえずSass形式で保存はしてあるけれどほとんどネストくらいはしただけといううちの会社のプロジェクトを題材に、Sassのリファクタリングをやってみた。辞書代わりにSassの教科書を添えて。

Sassはどんどんバージョンアップしていってて、使える関数が増えているらしいのだけれど、使いたい関数がまだ使えなかった。今のSassのバージョンは、安定板は3.2.13らしい。使いたい関数は3.3にあった。早くでてもらいたい。バージョン3.3からは文字列を扱うための関数が充実しているようだ。

参考URL: Sass 3.3で追加された「関数」や「変更点」のまとめ解説

新しい関数が使えたら、もっとリファクタリングできたんだけれど、Railsのバージョンに従う。
よくあるクラス系はもうループで定義すればいいなと思った。こんなの。

@for $value from 1 through 10 {
  .mb#{$value * 5} {
    margin-bottom: 5px * $value;
  }
}

あとは背景をどんどん設定していくとか。

@each $color in red, blue, yellow, green {
  .bg_#{$color} {
    background-color: $color;
  }
}

共通部分をわかりやすく共通化するとか。

.btn {
  width: 200px;
  height: 65px;
  color: white;
  text-align: center;
  border: 1px solid #f00;
}

.btn_ok {
  @extend .btn;
  background-color: green;
}

.btn_ng {
  @extend .btn;
  background-color: red;
}

上記のようにすると、こんなcssが出るはず。

.btn, .btn_ok, .btn_ng {
  width: 200px;
  height: 65px;
  color: white;
  text-align: center;
  border: 1px solid #f00;
}

.btn_ok {
  background-color: green;
}

.btn_ng {
  background-color: red;
}

でも上記のだと、使うかどうかもわからないbtnクラスを定義することになりますね。これは邪魔っちゃ邪魔。不要なクラスは定義したくないよーという場合はこうする。

%btn {
  width: 200px;
  height: 65px;
  color: white;
  text-align: center;
  border: 1px solid #f00;
}

.btn_ok {
  @extend %btn;
  background-color: green;
}

.btn_ng {
  @extend %btn;
  background-color: red;
}

すると、こうなるはず。

.btn_ok, .btn_ng {
  width: 200px;
  height: 65px;
  color: white;
  text-align: center;
  border: 1px solid #f00;
}

.btn_ok {
  background-color: green;
}

.btn_ng {
  background-color: red;
}

うん、すっきり。出力されるcssはそこまで短くはなりませんが、自分が管理するscss側ではずいぶん短くなると思います。あとはmixinとか関数とかもあるけれど、そこまでは使いこなせてない。まぁ昨日の今日だから、それでもいいかなと割り切る。これからもっと使えるようになろう！