Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！

HTML・CSS

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文など、よりプログラミング寄りの書き方もあります。
ですが、私はまだまだそのあたりは使いこなせていません！

正直、今回書いた