Sass入門 〜より効率的なCSSコーディング

こんにちは。ウェブサービス本部の hamashun です。
今回は CSS を便利にする Sass (さっす)という技術を、ディレクター向けにご紹介します。

最初に結論:Sassとは?

CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。

まずは普通のCSSについて

Sass のことを知るには、まずは CSS のことを知っておく必要があります。CSSを自分で書ける or 読める人は、この項は飛ばしてしまってかまいません。

p {
  color: red;
}

このソースコードは、ごくシンプルな CSS です。このソースコードの各部分を解説すると、次のようになります。

p:どこの / color:なにを / red:どうする

従って、上記のソースコードを日本語にすると、p要素(pタグ)内の文字色を赤にするとなります。
こうして見てみると、CSS の構文は、とてもシンプルであることが分かります。

CSS は、この「どこの・なにを・どうする」を繰り返して作業を進めていきます。このディレクターブログも、他の多くのサイトも、それは変わりません。シンプルなソースコードを数多く積み上げていくのが、CSSなのです。

CSSの問題点

CSS がシンプルであることは、初学者の敷居を下げるなどのメリットになります。しかし、現在のウェブサイトのデザインは、とても複雑なものが多くあります。そのため、CSS のソースコードは肥大化の一途をたどり、開発者の負担は増えて保守性は低下しているのです。

CSSの問題点を解決する、Sassのメリット

さて、そこで Sass の登場です。Sass はプログラムっぽく CSS を書くことで、CSS の様々な不満を解決できるのです。
「CSS の不満を、Sass ではどのように解決できるか」という観点で、いくつかの例を見ていきましょう。

不満1:同じ値が何度も登場する

例えば、リンクテキストの色を指定するには、CSS ではこのように書きます。

a {
  color: #00ccff;
}

この #00ccff という色を、リンクテキスト以外にも、例えばボタンや枠線の色にも使う場合は、

.btn {
  background-color: #00ccff;
}
.box {
  border: solid 1px #00ccff;
}

といったソースコードが必要になります。
これらのソースコードが位置的に隣り合っていれば、すぐに値をコピペできるのですが、何百行も離れていると「あれ・・・あの色のカラーコード何だっけ・・・」となり、該当する行までスクロールしてコピーし、また戻ってペースト、なんてことになりがちです。これはなかなか面倒ですね。

解決1:変数を使う

Sass なら、こう書けます。

$link: #00ccff;

a {
  color: $link;
}
.btn {
  background-color: $link;
}
.box {
  border: solid 1px $link;
}

最初に「$link#00ccff ですよ」と書いておくと、あとは「$link」と書くと、#00ccff になってくれるのです。16進数のカラーコードは覚えづらいですが、意味のある文字列なら覚えやすいのではないでしょうか。

不満2:ソースコードが見づらい

こんな CSS があったとします。

.title {
  font-size: 21px;
  font-weight: bold;
}
.text {
  font-size: 13px;
}

.story {
  width: 980px;
  margin: 0 auto;
  background: #fff url(/img/bg01.png) no-repeat right bottom;
}
.story .title {
  color: #0099ff;
}
.story .text .name {
  color: #ff99ff;
}
.story .icon {
  border: solid 2px #999999;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

aside {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
  border: solid 5px #ccc;
}
aside .title {
  color: #ff99ff;
}

ずらずらと並ぶ CSS のソースコードは、どこからどこまでが「一つのかたまり」なのかが、判別しづらいものです。
作業者の工夫などで「一つのかたまりが終わったら改行を 3 つ入れる」とか「セレクターを工夫して判別しやすくする」などという対応はできますが、ソースコードが複雑になったり、複数人が作業に関わったりすると破綻しがちです。

解決2:ネストを使う

.title {
  font-size: 21px;
  font-weight: bold;
}
.text {
  font-size: 13px;
}

.story {
  width: 980px;
  margin: 0 auto;
  background: #fff url(/img/bg01.png) no-repeat right bottom;
  //
  .title {
    color: #0099ff;
  }
  .text .name {
    color: #ff99ff;
  }
  .icon {
    border: solid 2px #999999;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }
}

aside {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
  border: solid 5px #ccc;
  //
  .title {
    color: #ff99ff;
  }
}

.story という部分に注目して比較すると、違いが把握しやすいかと思います。CSS の方では、新しい指定を書き始めるたびに、.story と書く必要がありましたが、Sass の方では、.story { } の中に他のソースコードを入れてしまうことで、.story を省略すると共に、見た目でも「このソースコードは .story の中にあるんだ」と分かりやすくなっています。

不満3:CSS3 はブラウザごとにプロパティを書くのが面倒

CSS3 を使うと、ソースコードを書くだけで、回転変形や角丸やドロップシャドウやグラデーションなどを実装することができます。これらはとても便利な技術ですが、まだ策定中の仕様も多く、プロパティ(機能)によっては、ブラウザごとに書き方が異なるものがあります。

これは、CSS3 の transform プロパティを使った、要素を回転させるサンプルコードです。

div {
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

p {
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

a {
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}

将来的にはそれぞれ一行で済むはずなのですが、現在は何行ものソースコードが必要になっています。これを必要になる度に何回も書いていたら大変です。

解決3:mixinを使う

@mixin transform-deg($deg) {
  -o-transform: rotate($deg);
  -ms-transform: rotate($deg);
  -moz-transform: rotate($deg);
  -webkit-transform: rotate($deg);
  transform: rotate($deg);
}

div {
  @include transform-deg(-45deg);
}

p {
  @include transform-deg(90deg);
}

a {
  @include transform-deg(120deg);
}

Sass の mixin (ミックスイン)を使うと、ソースコードをかなりスッキリさせることができます。
最初に @mixin で定義しておけば、あとはそれを使いたい時に @include で呼び出すだけで良いのです。

いかがでしょうか? Sass が「工数を減らし」「保守性を向上する」という理由がお分かりいただけたのではないでしょうか?

ここでご紹介した Sass の機能は、ほんのさわりで、まだまだたくさんの便利な機能があります。コーダー・マークアップエンジニアの人が使いこなせば、もっとたくさんの効果が得られるでしょう。

Sassのデメリット

ただし、Sass は良いことづくめではありません。いくつかのデメリットもご紹介しておきます。

学習コストが必要

Sass を使いこなすには、やはりある程度の学習が必要になります。ただし、普段から CSS を書いている人ならば、そこまで負荷の高いものではありません。
また、Sass は、通常の CSS を記述したり混在させることも可能です。不慣れな内は、「基本的には普通の CSS で、Sass は使いやすい便利な機能のみを利用する」といった運用も良いでしょう。

導入にクセがある

Windows のよくあるアプリケーションのように、「zip を解凍するだけ」や「exe をダブルクリックするだけ」に比べると、少しだけ導入にクセがあります。
とは言え、丁寧に解説しているサイトや書籍が存在しているので、そんなに苦労することは無いでしょう。

管理するファイルが増える

通常、Sass を使う場合は .css ファイルではなく .scss というファイルを編集します。これを .css ファイルに変換して利用するのです。
そのため .css ファイルの他に .scss ファイルも管理する必要があります。

しかし、上手い事やると scss ファイルだけを管理すればよくできる方法もあるので、エンジニアに相談してみると良いでしょう。
参考:いまどきの SCSS 運用方法 - "><xmp>TokuLog - tokuhirom's blog.

Sass について、もっと知りたい

この記事を読んで、Sass に興味を持った人は、以下のサイトや書籍がオススメです。

CSS HappyLifeさんのSass記事

CSS HappyLifeさんが、Sassを覚えよう!というステキ記事を書かれています。 Sass の環境構築はスクリーンショット入りで分かりやすいですし、基本的な機能もサンプルコード入りで丁寧に解説されています。

この連載をひと通りこなせば、Sass をかなり使いこなせるようになっているはずです。Sass 初学者に向けてのチュートリアルとしてもオススメです。

Sassの本

技術評論社から、Sass入門 〜より効率的なCSSコーディングという本が出ています。日本語では唯一の Sass 解説書です(2012年7月7日現在)。電子書籍のみの販売ですが、PCのブラウザからも読めますし、ソースコードがコピペできるので、とても便利に使えます。
執筆陣は、業務で日頃から Sass を使いこなしている、NHN Japan のマークアップエンジニア達です(#ステマ)。

以上、Webサービスの開発現場で今や日常的に触れるSassというものについて改めてご紹介しました。 NHN Japanでは、新しい技術で開発の効率化を図れるディレクターを募集しています。