Sass_3-1-1 ネストのルール

Sassの勉強を始めた。
今回はネストのルール。

CSSとSassの比較。

#main section {
  margin-bottom: 50px;
}
#main section h1 {
  font-size: 140%;
}
#main section ul, #main section p {
  margin-bottom: 1.5em;
}
#main section p.notes {
  color: red;
}

CSSで書くとこんなに長ったらしくなるけれど、Sassで書くと下のようになる。

#main {
  section {
    margin-bottom: 50px;
    h1 {
      font-size: 140%;
    }
    p, ul {
      margin-bottom: 1.5em;
    }
    p.notes {
      color: red;
    }
  }
}

こんなに短縮して書くことが出来る。
Sassはセレクタをネスト（入れ子）にして書くことができる。
ネストして記述することで、親子関係が分かりやすい。

参考

ルールのネスト（Nested Rules） | Web制作者のためのSassの教科書 - 公式サポートサイト