SASS・Compassが「WEB屋じゃなくても絶対便利」だと感じる7つのポイント

SASS・CompassがWEB屋じゃなくても絶対便利だと感じる7つのポイント

「SASSって言葉を聞くけど、一体何が便利なんだ?」

SASSの勉強を始めると、mixinとかextendとか関数とか…難しい単語を耳にすることが多くて、「なんだかとっつきにくい…」と思ってしまいます。

でも、趣味で個人ブログをカスタマイズするくらいであれば、そんな難しいことは覚えなくても十分SASSを便利に使えます。

今回は、そんな「SASSの全機能を使わなくても十分便利だと思えるポイント」についてまとめてみました。

CSS作成の効率アップができるSASS・Compassが絶対に便利!

ブログのカスタマイズでバリバリSASSを使っています。よっひー(@yosiakatsuki)です。

SASSの勉強を始めると、mixinとかextendとか関数とか…

いろいろと聞き慣れない言葉が出てきて大変な印象を持つのですが、WEB屋さんではなく、趣味で個人ブログのカスタマイズをするだけでもSASSは十分便利だと感じるポイントがいくつもあります!

今日は、僕がかれこれ1年以上SASS・Compassを使ってブログカスタマイズをしてきた中で、「プログラムのことはわからないけど、CSSなら少し書ける」というレベルでもSASSが便利だと感じることを7つほどピックアップしてみました!

  1. CSSの入れ子(ネスト)ができる!
  2. ベンダープレフィックスやIEハックを勝手に追加してくれる
  3. 色の加算・減算ができる!
  4. CSSのminifyが簡単にできる
  5. ファイルを分割して開発できる
  6. 1行コメントが使える!
  7. 変数が使える!

最初に、SASSの概要を簡単に説明した後、ポイントを1つずつ説明していきます。

SCSS(SCSS)・Compassとは

まずはざっくりSASSとCompassについて説明します。

SCSS(SASS)とは

まず最初に、SASSを調べるとよく出てくる「SCSS」ですが、「Sassy CSS」の頭文字をとるような形で「SCSS」となります。

今では、SCSSの記法で書かれていることがほとんどだと思いますが、「SASS」と呼ばれていることが多いです。(僕は「SCSS」と呼ばれているところをみたこと無いです)。

その「SASS」ですが、ざっくり言うと「CSSをプログラミングっぽく書ける言語」というとイメージしやすいと思います。

変数が使えたり、値の四則演算が出来たり、外部ファイルを読み込んで使ったり、関数を使うことが出来て、いろいろと便利にCSSを書けるようになります!

また、SASSで書かれたファイルをコンパイルしてCSSを作り出す…という、まさにプログラミング的なものになり、SASSの開発環境も必要になってきます。

ただ、CSSを拡張言語なので、CSSが書ければSASSを覚えるのもそれほど難しい話ではないので、SASSを始めるハードルは低めかと思います!

Compassとは

SASSと一緒によく聞くのが「Compass」ですが、「Compass」はSASSを拡張したフレームワークになるので、「SASSを便利にする機能の集まり」のように思って頂ければイメージしやすいと思います。

Compassを使うとCSSスプライトが作れたり、いろいろと難しいことが簡単にできるようになるのですが、一番有り難みを感じやすいのはベンダープレフィックスやIEハックの自動付与ではないでしょうか。

他にも、リセットCSSを利用したり、クリアフィックスを利用したりと、独自に定義されたCSSを簡単に利用することができます。

SASS・CompassがWEB屋じゃなくても絶対便利だと感じる7つのポイント

SASS・Compassの概要についておさえたところで、WEB屋じゃなくてもSASS・Compassが絶対に便利だと思うポイントを紹介します!

1.CSSの入れ子(ネスト)ができる!

SASSを覚えて一番良く使う機能といえばCSSを入れ子(ネスト)で書くことだと思います。

例えば、下のようなCSSがあったとします。

.post {
    padding: 10px 20px;
}

.post p {
    margin: 0 0 2.5em;
}

.post strong,.post b {
    font-weight: bold;
}

.post img {
    text-align: center;
}

.post figure {
    margin: 0 0 1em;
}
.post a {
    text-decoration: none;
    color: #0967ae;
}
.post a:hover {
    text-decoration: underline;
    color: #2f88cc;
}

もう、「どんだけ.postって書かなきゃいけないんだ!!」と思うのはきっと僕だけではないと思います…

でもこれをSASSで書くと、次のような書き方ができるようになります。

.post {
    padding: 10px 20px;
    p {
        margin: 0 0 2.5em;
    }
    strong,b {
        font-weight: bold;
    }
    img {
        text-align: center;
    }
    figure {
        margin: 0 0 1em;
    }
    a {
        text-decoration: none;
        color: #0967ae;
        &:hover {
            text-decoration: underline;
            color: #2f88cc;
        }
    }
}

.postの中に各プロパティを書いていけるようになります!

これなら.postは1回書くだけでOKです。入力の手間が一気に省けました!

ちなみに、上のSASSコードをコンパイルすると、次のようなCSSが完成します。

/* line 1, ../sass/screen.scss */
.post {
  padding: 10px 20px;
}
/* line 3, ../sass/screen.scss */
.post p {
  margin: 0 0 2.5em;
}
/* line 6, ../sass/screen.scss */
.post strong, .post b {
  font-weight: bold;
}
/* line 9, ../sass/screen.scss */
.post img {
  text-align: center;
}
/* line 12, ../sass/screen.scss */
.post figure {
  margin: 0 0 1em;
}
/* line 15, ../sass/screen.scss */
.post a {
  text-decoration: none;
  color: #0967ae;
}
/* line 18, ../sass/screen.scss */
.post a:hover {
  text-decoration: underline;
  color: #2f88cc;
}

いろいろとコメントがついてきましたが、最初の例と同じCSSが出来上がりました。

正直、これだけでも十分「SASSが便利で開発効率が上がる!」といえるポイントです!

2.ベンダープレフィックスやIEハックを勝手に追加してくれる

「ベンダープレフィックス」って、CSSを業務で書いてないとなかなかわからなかったり、見落としてしまうものだと思います。

CompassにはベンダープレフィックスやIEハックを自動でつけてくれる定義が用意されていて、それを利用すると簡単にクロスブラウザ対応ができようになります。

例えば次のSASSコードを書いたとすると…

@import "compass";
.rad {
    @include border-radius(50%);
}
ul.inlineblock li {
    @include inline-block;
}

作成されるCSSは次のようになります。

.rad {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

ul.inlineblock  li {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

たった1行のコードを書いただけなのに、いくつものCSSプロパティを追加してくれます。

Compassをちょっとずつ覚えていけば、様々なブラウザにも対応できるCSSが簡単に書けるようになります!

3. 色の加算・減算ができる!

SASSコード上では数式も扱えるようになります。

例えば、960pxの幅の要素の中に、300pxのボックス要素があって、その要素には1pxの線が上下左右引いてあって、残りの幅に上下左右1px、右に20pxの隙間をもたせたボックス要素を作りたいから、そのボックス要素の幅って何pxにすれば…

と、これだけでも計算が面倒な印象ですが、SASSなら次のように書けます。

div {
    width: 960px - 300px - 2px - 20px - 2px; 
}

出来上がったCSSは次のようになります。

div {
  width: 636px;
}

とりあえずわかっている数字を使って計算させれば、目的の数値が簡単に割り出せますね!

さらに便利なのは色の加算減算です。

a {
    color: #0967ae;
    &:hover {
        color: #0967ae + #222;
    }
}

リンクタグのホバー時に、元の色よりちょっと明るい色になるように色の計算をさせてカラーコードを出力するようにしてみました。

a {
  color: #0967ae;
}
a:hover {
  color: #2b89d0;
}

ちゃんとホバー時のカラーコードが変わっています。

メインのカラーを決めておいて、パーツごとに明るくしたり、暗くしたりと微調整するときにカラーコードの計算がすごく便利だったりします。

4. CSSのminifyが簡単にできる

CSSの圧縮(ミニファイ)が簡単にできるのもSASSのいいところ!

SASS→CSSの変換形式の設定1つで、コメントや無駄な空白を取り除いて1行にしたCSSを作成することが出来ます。

ページ表示速度UPの為にCSSの圧縮をするならSASSで書いてしまったほうが簡単になると思います!

5. ファイルを分割して開発できる

ここからは少しプログラミング的な話になります…

SASSで開発をするとき、複数のファイルを組み合わせて、1つのCSSを作成することが出来ます。

具体的には次のようなコードです。

@charset "UTF-8"; 

//styles.cssを作成するためにstyles.scssを作成
//「_header.scss」と「_post.scss」を読み込み
@import "header";
@import "post";
//ヘッダーのスタイルを定義する為に作った_header.scss
//「_」から始まるファイルはコンパイルされない
header {
    padding: 10px;
    margin: 0 0 10px;
}
//個別記事内のスタイルを定義する為に作った_post.scss
//「_」から始まるファイルはコンパイルされない
.post {
    padding: 10px 20px;
    p {
        margin: 0 0 2.5em;
    }
    strong,b {
        font-weight: bold;
    }
}

上の3ファイルをコンパイルして次のCSSが出来上がります。

header {
  padding: 10px;
  margin: 0 0 10px;
}
.post {
  padding: 10px 20px;
}
.post p {
  margin: 0 0 2.5em;
}
.post strong, .post b {
  font-weight: bold;
}

このように、ヘッダー・フッター・サイドバー・個別記事・一覧…とファイルを分けておくと、編集するときに「あれ?どこらへんに書いてあったっけな…」と迷うことが少なくなります。

6. 1行コメントが使える!

CSSのコメントってちょっと面倒じゃないですか…

特にプログラムを書く人にとって1行コメントが使えないのは正直なかなか面倒くさいです…

でもSASSなら1行コメントが使えるようになるのです!

/* コメント */

//sassならスラッシュ2つ並べることで、
//スラッシュ2つ以降〜その行の終わりまでをコメントとして扱ってくれます

細かいことですが、コレがなかなか便利です。

7. 変数が使える!

例えば、ブログのテーマカラーを1つ決めたとします。

その色を、ヘッダー・フッター・リンクカラー・他…と、複数の場所で使ってるとした時に、後からテーマカラー変えたくなったときどうしましょう。

CSS内を検索かけてHITする部分を1個ずつ修正…もしくは一括置換…

それでも十分かもしれませんが、SASSなら変数に定義して、その変数を使えば後から変更があった時も簡単に対応できるようになります。

@charset "UTF-8";    //
$bgcolor : #0967ae;  //変数「$bgcolor」を定義

//変数に色を設定しておけば、
//あとから変更する場合でも変数に代入する値を変えるだけで
//複数箇所に反映できる

header {
    background-color: $bgcolor; //変数使う
}
.post {
    a {
        color: $bgcolor; //変数使う
    }
}
.sidebar {
    border: 1px solid $bgcolor; //変数使う
}
footer {
    background-color: $bgcolor; //変数使う
}

僕の場合は、変数だけをひたすら定義したファイルを1つ作って、どこの色がどのカラーコードを使っているか…などを把握できるようにしています。

まとめ

いかがでしょう。ちゃんと勉強すると、mixinとかextendとかの話も出てくるのですが…

趣味で個人ブログをカスタマイズするくらいであれば、今回紹介した内容を使うだけでも「SASSって便利!」と実感できるのではないかと思っています。

SASS・Compassは「CSSのようにテキストエディタがあれば作れる!」というものではなく、環境を構築する必要があります。

開発環境のセットアップ方法についてもまとめたので、合わせて御覧ください!

よっしーのひとこと

よっひー

ちなみに、僕は次の本を読んでSASS・Compassを勉強しました。

環境構築からSASSの基本・Compassで使えるmixinの例と説明まで載っているので、初心者にはピッタリの1冊だと思います。

もし興味があれば読んでみて下さい。

ではまた。