sassを使う上で重要なことを書いてみました

さて、先日、Coda2でsassを使う方法をアップしました。
それから本格的にsassを触り始めたのですが、その中でちょっと気付いたことがあります。

By: Margaret W. Carruthers

sassを触り始めるとcompassまで使いたくなる

当初は「まあ最初だし、sassだけ使えればいいかな」と思っていましたが、sassの使い方を調べていると、compassの情報が自然と目に入ってきます。
compassはsassを更に使いやすくしたもので、mixinというライブラリ的な機能が提供されています。
例えば、divタグに角丸を適用したければ

@import "compass/css3/border-radius";
#box {
	width:240px;
	height:300px;
	background-color:#E5E6E9;
	@include border-radius(10px);
}

で角を10pxで丸めた角丸ボックスのCSSに変換されます。

変換後
#slogo {
  width: 240px;
  height: 300px;
  background-color: #E5E6E9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }

また、自分でmixinは設定できるため、定型化されたコードなどをmixinで設定しておけば、変更する時にいくつもコードを変更する、という手間が省け、なおかつコードの視認性も上がります。

なので、結局はCodeKitが使いたくなる

Mac OS Xユーザに限ったことですが、Macの環境でいちばん便利なsass/compass/less環境は「CodeKit」だと言われています。
「CodeKit」は$25と有料ですが、これ1本でsass/compass/less/CoffeeScriptなど、様々なCSS/JS環境のフレームワークをコンパイルしてくれます。
更に、「CodeKit」の機能でよく取り上げられるのが「イメージの圧縮機能」です。私は正直、「ImageOptim」の方が優れていると認識しているので、使う機会は少ないかと思いますが、画像まで含めて一気に省サイズ化出来るのはとても便利だと思います。

事前にサイトデータの構造化が必要になりそう

sassを利用する大きな目的の一つが、CSSの構造化、だと思います。
同じコードはまとめて記述したり、事前に使いたい機能に合わせてmixinを読み込む・設定する、ということをやっていく必要があります。
が、どちらかといえば、行き当たりばったりでコードを書いていた人の場合は手間ばかり増えて、効率が上がらないよ、ということにもなりかねません。
なので、この辺りで一度、考え方の転換が必要になりそうです。

「コーダ」と呼ばれる人たちや、一人でサイト製作をやっているような人たちにとっては、うまく使いこなせばかなりの省力化になるであろう「sass/compass/less」というCSSフレームワーク(と呼んでいいのでしょうか？)。これから大切な技術・・・というか、考え方の一つになりそうです。