Sass（※この記事ではSCSSを指します）やLESSといったCSSプリプロセッサがどんどんメジャー化しています。
しかし、私の実感としてまだまだ使っていない人も多いのではないか？と思っています。
導入が難しそう。書き方がわからない。CSS使えなくなってしまうの？
色々な疑問や不安があると思います。ですが、Sassはあなたが考えるほど難しくありません！
わたしもSassを使い始めて、まだ半年とちょっとです。そんな私の使い方をご紹介したいと思います。
※この記事では導入部やコンパイルの紹介はしません。
※前提
Sassを書けば勝手にCSSをいい感じに書いてくれる！というものではありません。
まだCSSにちょっと自信がない人は、まずはCSSに慣れたほうがいいです。
どんな効率化ツールを使うときでも、根本となる基礎はきちんと理解しましょう。
(1).scssファイル内にCSSを書く
まずはここから。大事なポイントは、「.scssの中身はCSSでも動く！」ということです。
なので、こう書いても大丈夫です。
.hoge {
width: 200px;
padding: 10px;
}
.hoge .fuga {
background: #000;
}
「えっ、でもこれCSSじゃない？Sassとはいえないんじゃない？」
そう言いたくなりますね。でも導入としてはこれで全く問題ないんです。
先述しましたが、大事なのは「.scssの中身はCSSでも動く」ことをわかっていること。
「じゃあ.cssファイルでもいいじゃない」
そうですね。ですが、数カ月後にサイトの更新がきた！というときに、
「あのときSassを使っていれば・・・！」と後悔するかもしれません。
少なくとも、私はしました。
長いベンダープリフィックス、使いまわせるCSSセットをあっちこっちに書く・・・
この辺りはCompassやmixinを使えばぐぐっと短い記述で済んでしまうのです！
そのときに使っていなくても、元ファイルがSassで書かれていれば移行の手間が省けますよね。
まだmixinはそれほど使い込んではいませんが、Compassは本当に便利です。
最後にほんの少しだけCompassをご紹介しているので、慣れてきたなと思ったら使ってみましょう！
(2)ネストで書いてみる
いよいよSassっぽいですね！
先ほど書いた例だとこうなります。
.hoge {
width: 200px;
padding: 10px;
.fuga {
background: #000;
}
}
これをコンパイルすると、.cssファイルで(1)と同じものが書かれます。
注意した方がいいのは、ネストがどんどん深くなると、
その分CSSでコンパイルしたときの階層もどんどん深くなってしまいます。
.hoge1 .hoge2 .hoge3 .hoge4 .hoge5 {
background: #f00;
}
・・・深い！優先度も考え、２〜３くらいのネストで済むよう意識しましょう。
この辺りはCSSの優先順位の考え方と全く同じです。
Sassを使うからと言って、ルールが変わったりすることはありません。
- 参考：スタイルの優先順位
- http://www.htmq.com/csskihon/007.shtml
(3)「&」を使ってみる
&は親参照セレクタです。私は擬似要素・擬似クラスや、複数クラスなんかで使います。
例えば・・・
a {
color: #ccc;
&.home {
color: #f0f;
}
&:hover {
text-decoration: none;
}
}
こう書くと、
a {
color: #ccc;
}
a.home {
color: #f0f;
}
a:hover {
text-decoration: none;
}
このようにコンパイルされます。
また、&要素は直前の親要素自身を指すので、このようにも使えます。
section {
color: #ff0;
#home & {
font-weight: bold;
}
}
これをコンパイルすると、こう！
section {
color: #ff0;
}
#home section {
font-weight: bold;
}
使っているパーツは各ページで同じだけど、
このページだけ微妙に違う。そんな時に使えますね。
オマケ！Compassを使ってみよう
ネスト、親参照セレクタ。ここまでを息をするように使えるようになったら、
Compassに挑戦してみましょう。ただ、こちらも挑戦、と意気込むほどのことではないです。
※いわゆるSassの拡張パック、みたいなものなので、別途導入が必要です。
実際の書き方はこんなかんじです。
@import "compass”; // Compassを使うファイルにインポートしましょう
.clearfix {
@include pie-clearfix();
}
なんと。clearfixもCompass側で用意されているのです。
これをコンパイルすると、このようになります。
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
ばっちりclearfixですね！
その他、角丸やドロップシャドウ、グラデーション背景などなど、
色々なものが用意されています。
ですが、そんなの覚えきれませんよね！私も覚えていません。
そんなときは、「プロパティ名（例：border-radius） compass」とgoogleで検索してみます。
Compassはリファレンスサイトがあるので、「これってあるかな？」と思ったら迷わず検索しましょう。（素直にリファレンスサイトで検索すればいい気もするのですが、googleだとピンポイントで検索結果に出てくれるのです・・・）
この他、Sassにはfor文やwhile文など、よりプログラミング寄りの書き方もあります。
ですが、私はまだまだそのあたりは使いこなせていません！
正直、今回書いた
- ネスト
- 親参照セレクタ
この２つが最低限使えれば、今までよりもぐぐっと作業スピードが早くなると思っています。
使いながら覚えられ、使いたいものだけを使える。これがSassのいいところですね。