kei3.jp | head -n 10 diary

スタイルシートの記述に関して、LESSを使っていたのですが、SCSSへ乗り換えようかと思ってます。

その最大の理由が継承(@extend)です。今まで特に不自由を感じてなかったのですが、それはLESSなりの書き方をしていた為。LESSの場合、SCSSよりもCSSをそのまま書く記述に近い為、共通する部分の記述はCSSを書いていた時と同じ様な感覚で書いていましたが、管理が面倒。

公式サイトの例でも書かれてありますが、SCSSで以下の様に書くと

.error {
border: 1px #f00;
background: #fdd;
}

.badError {
@extend .error;
border-width: 3px;
}

CSSは以下の様になります。

.error, .badError {
border: 1px #f00;
background: #fdd;
}

.badError {
border-width: 3px;
}

ちょっとした事ではあるのですが、数が増えた場合にはこの差は大きくなると思います。最初から.error, .badErrorと書けば良いのですが、上記の様に近くに記述されているとは限らないので、.badError{...}側を消してしまった場合に、.error, .badErrorの部分に残ってしまう場合もある。これはLESSを書く場合も同様。@extend .error;の様に継承を使えば、.badError{...}を消した場合、当然中の@extend .error;も無くなるので、余計な記述が残る事も無い。

ただ、SCSSの場合、@mixin の記述がちょっと気になるかな。明記する事で分りやすいとも言えますが、記述が増えるのはちょっと嫌かな。

まだ何とも判断しかねているのですが、取りあえず、SassとTextMateのバンドルはインストールしました。SCSSを暫く使ってみて、判断しようかと思います。

Sass - Syntactically Awesome Stylesheets
>>関連リンク

kuroir/SCSS.tmbundle
>>関連リンク

12:01追記

SCSS.tmbundleだとコマンドの使い勝手が悪かったので、SCSSファイルをCSSへコンバートするコマンドを作ってみた。コマンドファイルはGistに置いておいたけど、内容はこんな感じ。

#!/bin/sh

SASS_OPTS="-t expanded --scss"

cd ${TM_PROJECT_DIRECTORY}
sass ${SASS_OPTS} "${TM_FILEPATH}":"css/${TM_FILENAME%.*}.css"
echo "exported css/${TM_FILENAME%.*}.css"

オプションは適当に変更してください。CSSファイルを開いて読む必要も無いけど、SCSSの勉強中ってこともあるので、取り合えず、可読性を考えてexpandedにしてます。実際に運用する時は、compressedで良いと思います。

それからコマンドファイルでは.scssファイルを保存する時に自動的に変換する様にしてあります。

TextMate Command "Compile SCSS to CSS" ― Gist
>>関連リンク