<section id="sass">
<h1>Sass事始め</h1>
<p class="lede">CodepenのSettingの旅CSS編第3回。今回はSass。SCSSの姉妹メタ言語</p>
<section id="kihou">
    <h2>Sass記法</h2>
  <p>Sassの基本的な記法はこんな感じ</p>
  <ul>
    <li>波括弧({})は不要で、代わりにインデントを入れる</li>
    <li>コロン(:)の後に半角スペースが必要</li>
    <li>セミコロン(;)は不要</li>
    <li>波括弧{}は不要</li>

 <span class="bikou">文字数は少ないがLESSやSCSSよりも厳密な感じがする。</span>
    </p>
  </section>
<section id="nest">
<h2>ネスト(階層化)</h2>
<p>Sassのネストは、インデントを入れなければならないが、直接のネストでなければ、同じ階層じゃないタグでも同じインデント数で行けるようだ。<br>
 例えばpにインデントを一つ入れていて、その下のリストliはpから見たらulが並列で、liは一つ下だが、pとliは同じインデント数でもスタイルは適用された。<br>
 <span class="bikou">親セレクタの参照(&)はインデントをもう一段階下げる必要があった。</span>
    </p>
  </section>
</section>
#sass
  h1 
    color: red
    font-size: 2em
  p
    font-size: 0.8em

#kihou, #nest
  background: #eee
  margin: 0 0 20px
  padding: 10px
  h2
    color: blue
  p
    font-size: 1em
  li
    font-size: 0.8em
  .bikou
    font-size: 0.8em
    &:before
      content: '※'

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.