Site icon Tips Note by TAM

Sass(SCSS)は難しくないよ!私なりの使い方をご紹介!

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;
}

・・・深い!優先度も考え、2〜3くらいのネストで済むよう意識しましょう。
この辺りは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文など、よりプログラミング寄りの書き方もあります。
ですが、私はまだまだそのあたりは使いこなせていません!

正直、今回書いた

  • ネスト
  • 親参照セレクタ

この2つが最低限使えれば、今までよりもぐぐっと作業スピードが早くなると思っています。

使いながら覚えられ、使いたいものだけを使える。これがSassのいいところですね。