Sassってなんぞや？

こんにちは、マサヒロです。

Sassとは、CSSを拡張して扱いやすくしたスタイルシートのことです。 「Syntactically Awesome StyleSheet」の略で、意味は「構文的にイケてるスタイルシート」です。

CSSだけでも、イケてると思ってしまいますよね。例えば “padding-top: 20px” と書いたら確実に上部に空きスペースを20px分作ってくれますもんね。

でもこの Sass。やってみるとわかるのですが、それよりもほんと「イケてる」んです。

CSSよりもイケてる

CSSよりは完全にイケてます。

• コーディングの簡略化が可能
• 関数が使える
• 複数のファイルを1つにまとめることができる

コーディングの簡略化が可能

CSSでは以下のように親要素からその子要素、子孫要素まで、いちいち書かなければいけませんでしたが、Sassでは簡略化ができます。親要素や子要素が一緒であれば入れ子にして書くことができます。これがネストです。

/* CSSで記述 */
main .example .block--right {
  width: 100px;
  height: 50px;
  display: inline-block; 
}

main .example .block--left {
  width: 500px;
  height: 250px;

/*Sassで記述 */
main {
  .example {
    .block--right {
      width: 100px;
      height: 50px;
      display: inline-block;
    }
     .block--left {
      width: 500px;
      height: 250px;
    }
  }
}   

関数が使える

あらかじめ多くの関数がSassには用意されており、それらを必要なときに使用することができます。

僕がよく使うのは色を若干暗くしたい時に”darken関数や、明るくしたい時にlighten関数を使います。

.example {
  .block {
    width: 100%;
    height: 100px;
    background-color: darken(#fcfcfc, 20%);
  }
//上記のようにdarken関数を使えば#fcfcfcを暗くしたカラーコードを引っ張ってこなくても良い

複数のファイルを1つにまとめることができる

あるページのセクションのスタイルを使いまわしたいときありますよね。

例えばトップページのブログセクションのレイアウトを下層ページのブログページでも使いたい時です。

その際、CSSではわざわざトップページとブログページどちらともに同じCSSを当てないといけなかったのですが、Sassでは「パーシャル」という機能を使えば、トップページとブログページどちらとも同じスタイルを読み込むことが可能です。

これを活用することで「パーシャル」でいくつものファイルに分けたものを、1つファイルにまとめることが可能です。

何よりもメンテナンス力が高い

上記の3つの特徴だけでも、メンテナンスが随分と楽になります。

親要素のクラス名が変わってもSassであれば親要素1つだけ変えれば良いです。

関数を、例えばdarken関数を使えばメインカラーからどれくらい暗くした色なのか、など煩わしいことを考えなくても良いです。

パーシャル機能を使えば、わざわざ複数のページに同じスタイルを何度も何度も慎重にCSSをあてることも考えなくて良いです。

メンテナンス力が高いことは、コーディングの「モチベーションアップ」「時短」に繋がります。

まとめ

もっと他にもSassの魅力があります。

CSSをある程度慣れてきたらSassに移行して、CSSへのストレスを軽減していくのも、Webデザインの学習のモチベーション維持には大事だと思います。

以下が僕がSassを勉強した時に参考にした書籍です。是非一読ください。
参考書籍：Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ