CSSを書く速度が爆速になる!SCSSをつかってみた

SCSSが便利です。もう作業のはかどり具合がやばいです。 何が便利って、(わたしが)CSSで不便と思ったことをすべて解消しているところです。 やった事ない人はやってみてください。 もう便利すぎて一度ドはまりすると抜けなくなります。

例えば?

まず、変数です。使いたいなー、使えたらなーと思ったことがあるとおもいます。 たとえば、1つの要素に2つ要素が入っていて、3:7にわけるとします。 変更するとき、CSSでは親要素の幅と子要素2つすべて変えなければいけなくなります。 しかし、SCSSでは、親要素の幅を変数に入れておいて子要素はかけ算で値をだすようにします。 そうすれば親要素の幅の変更だけdですみます。 これはとても強力です。楽です。いままで電卓でだしていたpaddingとかmarginの計算も楽になります。 また、計算ミスもなくなり、ストレスも減ります。

次に、入れ子式にできることです。 通常ナビゲーションを作るときや疑似クラスを指定するとき、親要素などを繰り返していちいち指定するのがめんどうですよね。 でも、SCSSでは、入れ子式にできるので、次のようにできます。

#nav{
    ul{
        border:1px solid #999;
    }
    li{
        background:#CCC;
        &:hover{
            background:#FFF;
        }
    }
}

もしCSSでかくなら、

#nav ul{
    border:1px solid #999;
}
#nav li{
    background:#CCC;
}
#nav li:hover{
    background:#FFF;
}

こういう風に書くこともなくなります。 やはり入れ子式の方が楽でみやすく、意味もわかりやすいですね。 ところで、「あれ?&:hoverって?」と思った人いますよね。これが疑似クラスをらくにする武器です。とても便利なんです。 &が親をさしています(この場合はli)。 そのため、:hoverや:activeの指定が、その入れ子の中に&:hoverと書くだけでOKなのです。 これはとても助かりますよね。

さらに、buttonというクラスと、RedButtonというクラスの両方の:hoverというような複数セレクタに対する疑似クラスの指定なんかも、

.button, .RedButton{
    &:hover{
        color:#FFF;
    }
}

のように指定できます。

うれしいことにSCSSでは関数が使えます。 プログラマーにとってこれほどありがたいことはありません。 これも便利です。ベンダープレフィックスかく手間をおおいに省けます。 検索をかけるといっぱいでてきます。

おおざっぱでしたが、こんな感じです。 便利なことこのうえないので、ぜひ使った事がない人はつかってみてください。