本格的に制作にSassを導入してみたわけだが
Posted by admin at 9:11 日時 2013/06/12
Webサイト制作にSassを本格的に導入してみました。単に便利なだけではない色々メリットがあるということに気づいたので、かんたんにまとめてみます。
CSSでは不可能な入れ子構造で書けるのは、思ったより便利
Sassでは、CSSではできない入れ子構造での記述が可能です。たとえば、公式サイトの例ですが…
table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } } このSassファイルをコンパイルしてCSSファイルに変換すると、このようになります。
table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.2em; } まあ、この例だけだと、たいして変わらなくね？と思うかもしれませんが…。例えば、このようにCSSを書いていた時に、
#main { // #mainに対する指定 } .box { // .boxに対する指定 } CSSのカスケーディング上の都合で、.boxに対する指定は全て#mainの中に入れなきゃいけなくなったと。CSSなら.boxの前に#mainをコピペしていくことになりますが、Sassだとこの通り。
#main { // #mainに対する指定 .box { // #main .boxに対する指定 } } このような試行錯誤に強いしくみは、作業の無駄をなくしイライラを減らしてくれます。
変数とmixinでコーディングルールが明確になる
Sassでは、プログラミング言語と似た変数の考え方があります。これも公式サイトの例ですが、$blueと$marginという変数を用意し、それぞれカラーコードとピクセル数を指定し、使いまわしています。
$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } このSassをCSSに変換するとこの通り。
.content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } このように設定値を使いまわすことで、コーディングルールが明確になります。こんなルールをCSSの先頭に書いたりしたことはありませんか？
/** * gray: #9f9f9f; * dark-gray: #454545; */
そして、このルールを参照しながら色を選ぶこと！というコーディングガイドラインを作ったとする。
background: #9f9f9f;
でもまあ、守られるわけないですよね！（ごめんなさい）
いちいちコピペするのもダルいし、ぱっと見でルールに準拠してるかわかりにくい。変数にしておけば、変数を使わずに色指定しているのがはっきりします。
また、数値の計算が可能なことで、よりデザイン意図が明確にコーディングに反映されます。
どのくらい色を暗くするか color: darken($blue, 9%); 規定の幅を基準にどのくらいの幅をもたせるか margin: $margin / 2; 数値にしてしまうと分かりにくいこれらの設定も、計算式を書くことでよりデザイナーの意図を明確にコードに反映させることができます。
また、Sassにはプログラミング言語の関数と似たmixinという考え方があり、ひとまとまりのCSSの記述を抜き出し、呼び出して使うことができます。受け取った変数をもとに計算して値を返すという、まさに関数のような働きです。
@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px} } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; } このSassをCSSに変換するとこの通り。
#data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } このしくみの便利なところは、HTML側をいじらなくていいというところです。CSSだけでこのようにある決まったCSSの記述を複数の要素に適用したい時は、何かクラス名を作るのが一般的だと思います。
.data { float: left; margin-left: 10px; } .data th { text-align: center; font-weight: bold; } .data td, .data th { padding: 2px; } <div class="data" id="hoge"></div>
この方式だと、あとからこの要素にも同じCSSを適用したい！と思った時、HTML側を変更してクラス名を追加しないと行けません。もしHTMLを自由に編集できないCMSを使っていた場合、jQueryでaddClassしたりとか、していませんか？（していました）Sassを使うことで、HTMLは汚さずにCSSだけで解決ができます。
とりあえずmixinを適用しておけば、あとからの変更に強い
Sassを使うと、こんなmix-inを自作しておいて…
@mixin my-background($color:false) { background: { image: none; repeat: repeat; position: 0 0; } @if $color == "Black" { color: #ffffff; background-color: #3f3f3f; } @else if $color == "LightGray" { background-image: url("../images/bg_lightgray.png"); } } 明示的にルールに沿ったコーディングができます。
.hoge { background: @include my-background("Black"); } .huga { background: @include my-background("LightGray"); } しかもあとで一括で変更できます！
デザインにこだわる、あとからの変更を考慮する場合は非常に便利です。
ネット上の資産を容易に流用できる
例えば、IE8でも有効な、RGBAの色指定の仕方はないものかなーと思ったとします。最近ではググるとSassで出てくることも多くなりました。
SASS mixin for background transparency back to IE8
このmixinを落としてきて、すぐに使えるわけですからね。
@import transparent(#666666, 0.8);
しかも、あとからこのCSSに不具合が発覚したら。もしCSSで書いていて、複数の要素に使っていたとしたら、頭痛がするところですが、Sassを使っていればmixinを修正するだけでOKです。
CSSファイルを分けてもパフォーマンスに影響しない
CSSファイルはできるだけ分割したほうが、どのファイルにどの部分の記述があるのかはっきりして、分かりやすいですよね。コーディングガイドラインでファイルの分け方まで指定があることもよくあります。
一方、表示の際にはダウンロードするファイルの数が増えるほどページの読み込みが遅くなります。表示スピードを考えればCSSは1ファイルにまとめて、圧縮するのが望ましい。でも、そんなCSSファイル、メンテナンスしたくないですよね。
CSSを書く時はファイルを分けて、読み込み時は1ファイル、それが回答です。
@import "header_footer"; @import "main"; @import "sidebar";
一見、CSSの @import と同じですが、Sassの場合インポートするとインポート元のファイルを読み込んでCSSに書き出すので、そのタイミングでファイルがひとつにまとまります。
CSSフレームワークをもっと活用できる
はい、最近よく取り上げているFoundationです。これらのCSSフレームワーク、「HTMLに余計なクラス名が入るのがちょっと汚い」「CMSが出力するHTMLと相性が悪いと、結局自分で書きなおさないといけないので大変」みたいに思っていませんか？
そんなことないのは、すでにここまでの紹介で分かっていただけると思いますが、Foundationの場合、親切に各機能をSassで実装するにはどうしたらいいかもドキュメントに書いてあります。
既存の要素にグリッドを適用する
.wrapper { @include grid-row; #sidebar { @include grid-column(4); } #main { @include grid-column(8); } } フレームワークには思想と設計があります。Foundation 4だと、モバイルファーストが設計の根幹に関わっていますので、FoundationをベースにSassプロジェクトを構築するだけで、自然にモバイルファーストな書き方になります。
ただし、使いこなそうと思うと、結局フレームワークのSassのソースを常に見ながらになるので、ちょっと面倒。作業中はほぼGitHubの zurb / foundation / scss / foundation / components のページをブラウザで開いていて、ソースを参照しています。ソースコードがすぐに参照できるフレームワークのチートシートがあると良いなと（そういう意味で自分の記事は使いものにならない）。
ただ、オープンソースのSassファイルはバージョンアップを繰り返し世界中からプルリクエストを受けているだけあって、非常によく考えられているし、読むだけでかなり勉強になります。効率的かつ再利用性の高いCSSを書くにはどうすべきかの知見が詰まっています。このようなオープンソースの利点は、これまでデザイナーの世界にはあまり入ってきていなかったのではないかと思います。
自分の場合は、WordPressを触りはじめて、かなりPHPの勉強になりました。見やすいコードの書き方や、PHPアプリケーションの作り方や、セキュリティについて、色々な試行錯誤が詰まっているので、それらをいちいち教えてもらうよりも、コードを見ることで自分のレベルアップになりました。CSSにもSassやLESSなどのメタ言語が登場したことで、再利用性が高くメンテナンスしやすいスタイルシートの書き方やクロスブラウザ対応などのノウハウが広く共有される土壌ができあがったと言えます。そういう意味で、Sassは単に自分が楽になる！という以上に、そのような世界中のデザイナーが共有しているオープンなコードへのアクセスを可能にするという点で、計り知れないメリットがあると感じています。
