<section id="less">
<h1>LESS事始め</h1>
<p class="lede">CodepenのSettingの旅も遂にCSS編に突入。今回はLESSデス。<br>
それにしても、Codepen、予測変換機能があるといいなぁ<br>
あ、でもあれか。予測変換がない方が学習経験的にはいいのか。</p>
  <section id="nest">
    <h2>ネスト(階層化)</h2>
    <p>LESSはdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。<br>
      おお、これはHTMLとほぼ同じ構造になっていて<em>見やすい</em>のではないだろうか!<br>
      CSSの記述量も減っているし、HTML内にBEMのような長いclassをつけなくてもいい。<br>
      <span class="bikou">親セレクタの参照、LESSでもできてる?もう少し比較が必要か。</span>
    </p>
  </section>
</section>
#less h1 {
  color: red;
  font-size: 2em;
}

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

#nest {
  background: #eee;
  padding: 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.