［アラフォプログラミング未経験］Sassの特徴について学んだみた

はてなブログのレイアウトにまだまだ苦戦中です。。。

一方で、Sass、BEM、Hamlの関係が少しわかってきました！

プログラミングの良いところは、どんなに難解でも必ず答えがあるということですかね。

答えにたどり着く手順を理解できれば、自ずと導かれるというか。。。

・・・まあ、まだまだですが、、、

目次

Sassのメリット

Sassには以下のようなメリットがあります。

記述の簡略化ができる

親子関係にあるセレクタを入れ子にして書くことができます。

CSSでは、親の要素から対象要素までのセレクタを何度も書く必要がありますが、

Sassはネストさせることで、同じ親のセレクタをまとめることができます。

~カリキュラムより抜粋〜

これって、最初よくわからなかったんですが、

今まで細かい仕様を全て列挙して書いていたことを思うと

画期的にですよ！

・・・って今気づきましたwww

Sassのネスト構造

SassではCSSをネスト(入れ子)して記述することができます。

ネストして記述することで深い階層になっても親子関係がわかりやすい、

親要素を複数記述しなくて済むといったメリットがあります。

~カリキュラムより抜粋〜

今までのCSSなら、こうでした。

sample.css

.block {
  background-color: #000;
}

.block .title {
  color: #FFF;
  font-size: 70px;
  text-align: center:
}

.block .text {
  font-size: 15px;
  color: #FFF;
}

.block .text span {
  color: red;
  font-size: 20px;
}

でも、 Sassならこんな感じ。

sample.scss

.block {
   background-color: #000;

  .title {
    color: #FFF;
    font-size: 70px;
    text-align: center:
  }

  .text {
    font-size: 15px;
    color: #FFF;
    span {
      color: red;
      font-size: 20px;
    }
  }
}

.block要素の中に必要な要素や追加したい記述を入れ子して、

その要素のみの色やサイズを記載すれば良いのです。

これ考えた人、すごいぃ。。。

次回もさらに特徴を紹介します。