Sass(scss)の簡単な使い方まとめ

2013-10-30

CSSでのスタイリングを強力にバックアップしてくれるSass(scss)とCompass。これを使いこなせればCSSスタイリングが今までよりもっと楽になるのです。ということでここではSass(scss)の使い方を簡単に紹介します。

Sass(scss)って何？

まずは簡単にSassについて確認。SassとはCSSを拡張したメタ言語でCSSにはない非常に強力な機能をもっている。しかしHAMLというややこしい書き方をしなければならず、覚えるのが大変。使ったことがないのでわからないがこんな書き方をするらしい。

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

このややこしいSassをCSSと同じような書き方で使えるように改良されたものがSCSS。具体的にどんな機能を持っているかというと、

変数が使える
セレクタのネスト（入れ子構造）ができる
ミックスイン（関数）が使える
セレクタのスタイルを継承（使い回し）できる

こんな感じ。これを見ただけではいまいちわかりにくいかもしれないので以下で実際にコードを確認しながら使い方を説明していきます。

SCSSでできること

では、SCSSの書き方使い方を簡単に紹介していきます。まずは変数から。一番簡単なところなのでサクッといきましょう。

SCSS　変数の使い方

変数はよく使い回す値（例えばbackground-colorとか）に名前（変数名）をつけるだけ。その際必ず頭に$（＄マーク）を付けること。あとはセレクタの中でプロパティの値として変数を使うだけ。ここはCSSを書くのとほとんど同じなのでとっても簡単。

/*
変数
テーマカラーの変更とか便利

$名前:セットする値;
*/

$color-base:#ffffff;
$color-sub:#333333;
$color-key:#ff8a8a;

$fontsize-base:16px;
$fontsize-title:30px;


/* SCSS */
body{
    color: $color-base;
    font-size: $fontsize-base;
}


/* CSS */
body{
    background-color: #ffffff;
    font-size: 16px;
}

SCSS ミックスインの使い方

ミックスインはプログラミングの関数に近い。が、戻り値や型指定などがないのでさらに簡単。関数というよりCSSスニペットに名前を付けていつでもどこでも呼び出せるというイメージ。

ミックスインには名前とその中で使える変数名（ローカル変数）を指定する。ミックスインの便利なところはこのローカル変数にある。変数は変数名と値が一意だったが、ローカル変数を付けることでミックスインを使う場所によって値を変化させることが可能。

例えば、角丸のプロパティをセットしておき使用する場所ごとに値を変化させるという使い方ができる。今までは使う場所によってclassを指定したりしていたが、このミックスインのおかげでHTMLとCSSをいったりきたりせずに済むようになった。

/*
ミックスイン
よく使うものをスニペットとして保存しておこう
*/

/* 
ミックスインの作り方
頭に@mixinを付ける

@mixin 名前($変数1,$変数2,...){

    プロパティ1:$変数1;
    プロパティ2:$変数2;
    プロパティ3:$変数1 $変数2 ...;
}
*/

@mixin border($px,$style,$color){

    border: $px $style $color;
}

/* 
ミックスインの使い方 
頭に@includeを付ける

@include 名前(値1,値2,...);
*/

.box{
    @include border(1px,solid,#333);
}



/* CSS */
.box{
    border: 1px solid #333;
}

SCSS ネスト（入れ子）の使い方

ネストはセレクタを入れ子構造にすることができる機能。例えばli要素の中にimgとaがあったとき普通のCSSではli imgやli aなどと指定していた。これが入れ子構造で記述することができるようになり、同じものを何度も書く必要がなくなった。

/*
ネストの使い方 

{}内でどんどん入れ子をつくる
*/

li{
    border-bottom: 1px solid #eee;
    
    a{
        display: block;
        padding: 10px;
        background-color: #fff;
        
        &:hover{
            background-color: #aaa;
        }
        
    }
    
    span{
        font-size: 14px;
        color: #333;
    }
    
}



/* CSS */

li {
  border-bottom: 1px solid #eee;
}

li a {
  display: block;
  padding: 10px;
  background-color: #fff;
}

li a:hover {
  background-color: #aaa;
}

li span {
  font-size: 14px;
  color: #333;
}

SCSS 継承の使い方

継承もこれまた便利な機能。例えばh1やh2でスタイルは同じなんだけどfont-sizeだけを変えたいという場合。CSSではh1,h2…として同じスタイルをひとくくりにしていた。一方SCSSの継承を使うとh1で一度スタイリングしたらそれをそのままh2で呼び出し、変更したいところだけを記述することで同じ部分を省略することができる。

/* 
継承の使い方 

@extend セレクタ名;
変更するプロパティ:変更する値
*/

h1{
    padding: 10px 0 10px 6px;
    border-left: 6px solid #333;
    font-size: 30px;
    color: #333;
    font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
}

h2{
    @extend h1;
    font-size: 20px;
}


/* CSS */

h1, h2 {
  padding: 10px 0 10px 6px;
  border-left: 6px solid #333;
  font-size: 30px;
  color: #333;
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
}


h2 {
  font-size: 20px;
}

SCSSの使い方　まとめ

ここまでSCSSの使い方を簡単に説明してきた。実はSCSSには他にもif分やfor文でもっと関数的に使うこともできるので、使いこなせばかなり高度な使い方も可能だ。

ただ、SCSSを使ってもコードが短くなったり軽くなったりするというわけではなく（逆に長くなりがち？）、CSS化（コンパイル）したあとのことをイメージしながら作っていく必要がある。

とはいえ、ミックスインやネストを使うことでCSSの記述が今までより便利になることは間違いない。高度な使い方もできるが、最初はここで紹介した４つの機能を中心に使いこなすことをオススメする。

このあとは？

SCSS覚えたらついでにCompassも使えるようになっておこう。CompassはSCSSの拡張パックみたいなもの。簡単に説明すると、ミックスインをif文とか使って高度にスニペット化したものだ。使い方はとっても簡単なので是非チェックしてほしい。

・Compassの簡単な使い方まとめ

使い方がわかったら、次はSCSSとCompassのインストールから初期設定までを行い実際に使えるようにセッティングする。

・Sass(scss)&Compassのインストールと初期設定の方法まとめ

今回の記事はいかがでしたか？参考になったよ！という方はぜひコメントやいいね！をお願いします：）