SASSの導入に今一つ積極的になれない方へ

#なぜSASSの導入を勧めたいか

まだやったこともない、調べたこともない人向けです。

なぜSASSの導入を勧めたいか…
それはひとえに楽だから！
それ以外に理由はないのです。
どのように楽かと言うと…

##入れ子

css

.moge {
    margin: 0 0 10px;
}
.moge a {
    font-size: 10px;
}
.moge a:hover {
    text-decoration: none;
}

いつもならこう書くと思います。
がしかし、SCSSで書くと、

css

.moge {
    margin: 0 0 10px;
    a {
        font-size: 10px;
        &:hover {
           text-decoration: none;
        }
    }
}

簡単！
入れ子最高。
わかると思いますが、いちいち親要素のclassをコピーしなくていいんですね。
.mogeならともかく、長い名前だったりするとコピーします。
このひと手間がないだけでだいぶ楽になります。
でも入れ子のやりすぎはダメだぞ。

この入れ子だけでもやる価値は十分にあると思うのですが、こんなもんじゃない。

##変数

css

$mainColor: #333;
.moge {
  color: $mainColor;
}

これがコンパイルされると…

css

.moge {
  color: #333;
}

こうなるわけです。
変数に格納して召喚できてしまうのです。ｶﾞｵｰ
色などいちいちフォトショップ見てからコード取ってきてとかやってたでしょう？
めんどくさいでしょう？
あれがなくなります。

SassMeister
こちらのサイトでSASSが試せます。
SASSを書いたらどうコンパイルされるか色々試してみましょう＾＾
コンパイルって何？とかは今置いておきましょう。

変数はカスタムプロパティが使えれば何にも問題はないんですけどね。

##mixin

いつものお決まりのCSSの書き方があると思います。

css

/* 1 */
@mixin ellipsis(){
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 2 */
.hoge {
  @include ellipsis;
}

/* 1 */
@mixin fontset($size,$color){
  font-size: $size + px;
  color: $color;
}
/* 2 */
.moge {
  @include fontset(19,#fff);
}

1を用意しておけば、この記述が必要な時に
2を書くだけ。

なんて簡単！
ほんのほんの少しだけ機能の紹介をしました。
もっとあるんですよ。
if文の使ったのものやらなにやら。

ひとまず導入してすぐに使えそうなものを紹介してみました。
これだけで時短になると思います。
これらを駆使して爆速コーディングめざしましょう。！(‘・ω・́)ゝﾋﾞｼ