1 Comment / Trackback

学習コストに対する学習後の効率化というメリット。
新しいものを導入する際には必ずその2つを天秤にかけなければならず、学習コストのほうがメリットよりも負担になるのなら、そんな技術の習得は必要ないと断言できますが、Sassに関しては今後Webデザイナーやマークアップエンジニアは確実に覚えないとダメな技術に思えます。

JavaScriptで言えば近年 CoffeeScript が注目を集めていますが、こうした技術をいつ、どのタイミングで、どこまで追いかけるのかは実に判断の難しいところ。
結論から言うと、迷う暇があったら学んでみようというところでしょうか。まずは新しい技術に触れてみて感触だけでも掴んでおければ、いざその技術が潮流に乗ったときにスムーズに導入することができるでしょう。

なかには、せっかく覚えたのに廃れていく技術もあるかもしれません。しかし、そんなのは今のWeb業界では当たり前のことだと諦めるしかない。
新しい技術への対応に躊躇していると、いつまでも非効率的な2〜3世代前の古い技術を使い続ける羽目になってしまうリスクが生じます。WordPressだって、レスポンシブデザインだって、jQueryだって、CSS3だって、どうせすぐに新しい技術に置き換わっていく運命なんだ、ぐらいに割り切ったうえで覚えていくしかないのだと僕は思っています。
しかし、新しい技術は既存の技術のベースのうえに成り立つことがほとんどなので、これまでに学んできたことは決して無駄にはならないはず。Sassだって、CSSが書けて初めて使える技術ですから。

そもそもSassって何？

SassとはSyntactically Awesome Stylesheets（構文的にすばらしいスタイルシート）の略。

CSSを効率的に書くために作られた拡張言語で、拡張子は.scssです。Webブラウザは.scssという拡張子は認識してくれないので、最終的には.scssを.cssにコンパイル（変換）して、ブラウザに対してはコンパイル後の.cssを読み込ませる必要があります。

.scssから.cssへのコンパイルを実現するためのGUIとして Scout というアプリケーションがあります。もちろんCUIで.scssをコンパイルすることもできますが、GUIに慣れ親しんだ（というかCUIが苦手な）WebデザイナーはScoutを使えば十分だと思います。
Scoutを使う場合の欠点は、若干ながらコンパイルに時差が生じるということです。.scssを弄って保存した直後にブラウザをリロードしても、まだ.cssとして書き出されていない、というケースはわりと起こるかもしれません。

また、Dreamweverは.scssというファイル形式を知らないので、CSSのコードヒントを表示してくれません。DreamweaverでSassを効率よく書くためには、Dreamweaverの設定を少し弄ってやる必要があります。
下記の記事を参考にDreamweaverでも.scssをCSSとして認識してくれるようにするとよいでしょう。

DreamweaverでSassファイルを編集するには？ | Webデザインのタネ

セレクタをネストして構造把握を容易に

それでは、ここからSassを使うメリットを簡単に解説。

一番わかりやすくて、これだけでも使う価値があるのでは？と思わせるSassのメリットはセレクタの親子関係をネスト（入れ子）で表現できることだと思います。
たとえば、Sassを使えば以下のような表現が可能になります。

#content {
  overflow:hidden;
  margin:0 auto;
  width:980px;

  #main {
    float:left;
    width:700px;
  }

  #sidebar {
    float:right;
    width:250px;
  }
}

セレクタの親子関係をネストで記述することによって、よりCSSを構造的に把握することができるようになります。
上記のコードは2階層しかない単純なものですが、大規模サイトになればなるほど通常のCSSのセレクタの書き方では要素の継承を把握するのが困難になってきます。
一体どこで指定されたセレクタが継承されてこんな表示になってるんだろう？と躓いた経験は誰にでもあるでしょう。
Sassを使えば、そうした複雑なセレクタの継承というのはより視覚的に把握することが可能になります。

ちなみにこれをCSSへコンパイルすると、以下のようになります。

#content {
  overflow: hidden;
  margin: 0 auto;
  width: 980px;
}
#content #main {
  float: left;
  width: 700px;
}
#content #sidebar {
  float: right;
  width: 250px;
}

CSSを結合してひとつのファイルに

Sassは複数のファイルを結合してひとつのCSSにしてくれます。

CSSの場合、@importでひとつのCSSファイルから複数のCSSファイルを読みにいくことはできますが、CSSファイル自体が複数あることには違いありません。
ブラウザにもよりますが、@importで複数のCSSを読み込む場合、シーケンシャル（順番）に処理されるのでパフォーマンス上好ましくないとされることがあります。

Sassを使ってCSSを吐き出す場合には、複数の.scssを結合してくれるだけでなくCSSを圧縮させたりコメントを排除したりすることもできるので、パフォーマンスの改善というだけでなく、コードを難読化させられるというメリットもあると言えるでしょう。

Sassで複数のCSSを束ねるには以下のように書きます。

@import "_reset.scss"
@import "_mixin.scss";

#content {
  margin:0 auto;
  width:980px;
}

Sassの@importではファイル名の先頭に_（アンダーバー）の書かれたファイル名を.cssとして出力しません。
上記の書き方だと、reset.scss、mixin.scssの2つのSCSSファイルを読み込んだうえで#contentセレクタに対してスタイルを適用したCSSをひとつのファイルとして書き出すことになります。

変数の利用とミックスイン

そして、Sassの一番の醍醐味はコードの再利用とプログラム処理が可能になるということです。

通常のCSSでは変数や条件分岐といった複雑な処理を行うことができませんが、Sassを使えばこうした処理が可能になります。よく使うコードは変数として格納してしまえば、簡単に呼び出して利用することが可能になります。

まずは変数について。
たとえば、以下のようにフォント名を定義してあげます。

$default_font:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;

すると、これを変数として以下のように.scssに代入することが可能になります。

body {
  font-family:$default_font;
}

当然、CSSとして吐き出された際は以下のようなコードになってくれます。

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}

フォント以外にも、同じ色だったり、同じマージンだったりというのはCSSのなかに何度も登場するので、そうした要素は変数にしておくと記述が楽になるし、万一変更が起こった際も一発で直りますね。

そして、ミックスインという機能を使えば、スタイルの設定ごと定義して他の場所で呼び出して使うことが可能になります。
たとえば、以下のようにclmという名前のミックスインを定義します。

@mixin clm {
  border:solid 1px #ccc;
  margin:10px;
  width:200px;
  height:300px;
}

これを.scssで呼び出すためには@includeを使って以下のように書きます。

.clm_01 {
  @include clm;
}

これで、.clm_01というclass名の要素にはclmで定義したボーダー、マージン、幅、高さが適用されるようになります。

.clm_01 {
  border: solid 1px #ccc;
  margin: 10px;
  width: 200px;
  height: 300px;
}

ベンダープリフィックスの自動付与

TwitterやYouTubeのおかげでプログレッシブエンハンスメントの考え方が普及し、最近はborder-radiusなどCSS3のプロパティも気兼ねせず使えるようになってきました。
しかし、そうは言ってもベンダープリフィックスを付与しないと表示できないプロパティはまだたくさんあります。
そうしたとき、いくつものベンダープリフィックスを覚えて書くのは大変煩わしい作業。

Sassを上手に使えば、こういう処理は非常に簡単に自動化することができるようになります。
僕が必ずミックスインとして定義するのが以下のコード。

/* ------------------------------
  対応ブラウザを定義
------------------------------ */
$use-prefix-webkit:true; // WebKit用
$use-prefix-moz:true; // Firefox用
$use-prefix-ms:true; // IE用
$use-prefix-o:false; // Opera用

/* ------------------------------
  ミックスインを定義
------------------------------ */
@mixin prefixed-property($property, $property-value) {
  @if $use-prefix-webkit {-webkit-#{$property}:#{$property-value}; }
  @if $use-prefix-moz {-moz-#{$property}:#{$property-value}; }
  @if $use-prefix-ms {-ms-#{$property}:#{$property-value}; }
  @if $use-prefix-o {-o-#{$property}:#{$property-value}; }
  #{$property}:#{$property-value};
}

これをミックスインとして定義しておけば、ベンダープリフィックスの付与がとてもラクになります。
たとえば、border-radiusの場合は以下のように書けばよいことになります。

.box {
  @include prefixed-property(border-radius, 3px)
}

上記だとOperaのベンダープリフィックスはfalseに設定しているので、WebKit、Firefox、IEのベンダープリフィックスが自動的に適用されて、以下のようなCSSが吐き出されることになります。

.box {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

これは大変便利。

Sassを学ぶには

ネット上に有益なリソースがたくさん出回っていますが、やはり手元に1冊本を置いておくとよいでしょう。

「これ1冊あれば、まずは大丈夫」と思えるのは、技術評論社の『Sass入門 ～より効率的なCSSコーディング』です。
基本から上級者向けの情報までひととおり網羅されているので、一気に読むというよりはSassを実際に書きながら、徐々に読み進めていくとよいと思います。

Sass入門 ～より効率的なCSSコーディング | Gihyo Digital Publishing

その他、ネット上のリソースとしては以下の記事がわかりやすいかと。

効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！ | Webクリエイターボックス

Sassを覚えよう – CSS HappyLife

今さら聞けない？！Webディレクターの為のSass講座 : NHN Japan ディレクターブログ – Season 8

Sassを活用すれば、担当者ごとに細かく担当箇所を割り振ってファイルを分けても、後から結合してくれるのでチームでの制作もより効率化できる可能性があります。
運用ルールはしっかり取り決める必要がありますが、大規模案件や定期案件により力を発揮してくれそうな技術だと思います。

実践Sass 前編（SlideShare）

実践Sass 後編（SlideShare）

Sassの欠点をあげるとすると、やっぱり学習コストです。
本格的に導入しようとすると、社内の人間はもちろん外部のパートナーさんたちの協力も必要になってくるわけで、Sassについてみんなに覚えてもらう必要が出てきます。
みんながみんな高度な知識を持つ必要はないですが、必要最低限の知識は共有しなければならないでしょう。

あとはクライアントサイドで更新をかける可能性のある受託案件にはなかなか導入しづらいですね、やはり。クライアントに対して「Sassを覚えろ」というのは無理な可能性が高いので、そうした案件にはSassの導入は向きません。

一人で突っ走っても仕方ないので、周囲のデザイナーやマークアップエンジニアの習得状況、案件の性質などを見たうえで徐々に導入していく、ということでよいのだとは思いますが、そろそろ我が社も本格的に導入に踏み切ろうかと思っている今日この頃です。

Trackback

http://writing-mode.com/20130127/sass/trackback/