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の教科書 - 公式サポートサイト