読者です 読者をやめる 読者になる 読者になる

似非プログラマのうんちく

「似非プログラマの覚え書き」出張版

Sass はプログラマの三大美徳を満たす

このブログの究極の目標は、皆さんにプログラマの三大美徳、短気・怠惰・傲慢を身につけていただくことである。今回は、Sass を例にとってプログラマの三大美徳を見ていただこう。

Sass とは ? : Sass: Syntactically Awesome Style Sheets

ある CSS で以下のようなプロパティの指定をすることを考える。

th.hoge { ... }
th.fuga { ... }
th.piyo { ... }
...

th がこの後ずらずらと並ぶと思いねぇ。いちいち th を打つのは面倒だが、これならまだコピー & ペーストで何とかなる。しかし。

「あ、追加で td にも同じ指定してくれる ?」

ハイ来た、これ来た。こいつをまるっとコピー & ペーストしてから、手作業で thtd に直さないといけない。エディタの置換機能を使うにしても、元々 th だったものまで変換はできないし、そうなると何かと間違いが起こる。起こるんだってば。*1

...というところまで頭に思い浮かぶわけである。まだ起きてもいないトラブルに腹を立てる。まさに短気である。もちろん、こんな面倒なことはしたくない。怠惰も来た。第一メンテナンスが面倒で他人に任せるのが怖い。傲慢も来ました。

そんなわけで、それらを回避するべく策を練る*2わけだ。

「Sass を使えばいいんじゃね ?」上記の CSS を Sass(SCSS) で書くとこうなる。

th {
  &.hoge { ... }
  &.fuga { ... }
  &.piyo { ... }
  ...
}

これを適当なツール*3CSS に変換すればいい。想定していた要求にも簡単に答えられる。

th {
  &.hoge { ... }
  &.fuga { ... }
  &.piyo { ... }
  ...
}

td {
  &.hoge { ... }
  &.fuga { ... }
  &.piyo { ... }
  ...
}

下の td 部分はもちろんコピー & ペーストだが、直す箇所はたったの一箇所だけである。これなら間違いも起こりにくい。

かくして、短気が功を奏して面倒な作業から解放され、怠惰を思う存分満喫できる。可読性もバッチリだ。鼻が高い(傲慢)。

え ? 人のインフラにただ乗りして悦に入るなって ? 車輪の再発明とかしたくねーし(また怠惰)。

*1:だいたいこういう面倒な修正作業を頼まれるのは疲労度 MAX のときと相場で決まっている。決まってるの !

*2:ここがポイント。プログラマの三大美徳を満たすための労力は惜しんではならない。

*3:Sass の公式サイトにツール類へのリンクがある。好みのものを使おう。