<section id="scss">
<h1>SCSS事始め</h1>
<p class="lede">CodepenのSettingの旅CSS編第2回。今回はSCSS。LESSに似てる?</p>
<section id="nest">
    <h2>ネスト(階層化)</h2>
    <p>SCSSもdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。<br>
      ん?この書き方はLESSとほぼまったく同じだ。<br>
 <span class="bikou">インデントについても厳密でじゃでなくても解釈してくれるようだ(?)</span>
    </p>
  </section>
  <section id="oya">
    <h2>親セレクタの参照</h2>
    <p>おそらくLESSにはないSCSS専用の機能。ネストして「&」に擬似要素を付けると親セレクタを参照できる<br>
 <span class="bikou">この尾行欄につけている「※」印は「.bikou:before」ではなく「&:before」だけで済んでいる。 </span>
</p>
  </section>
</section>
#scss h1 {
  color: red;
  font-size: 2em;
}

#scss .lede {
  font-size: 0.8em;
}

#nest, 
#oya {
  background: #eee;
  padding: 20px;
  margin: 0 0 20px;
  h2 {
    color: blue;
    font-size: 1.5em;
    line-height: 1.2;
    }
  p {
    em {
      font-weight: bold;
      color: brown;
    }
.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.