<section id="postcss">
  <h1>PostCSS事始め</h2>
  <p class="lede">CodepenのSettingの旅CSS編の最終回。「次のCSS」とは一体何か?<br>
    PostCSSは新し目のメタ言語で、LESSやSASSと同じようなことができるがコンセプトは少し違うようだ。
</p>
  <ul>
    <li>処理がかなり高速</li>
    <li>必要な機能をプラグインで加えていく</li>
    <li>プラグインは個人が自由に作ることができるため、様々な種類が公開されている。</li>
    <li>cssnextなどのプラグインは将来W3Cが採択する予定の記法を先取りして使用できる。</li>
  </ul>
  <p>プラグインは「@use hogehoge;」という感じで入れるようだ。</p>
  
<section id="nested">
  <h2>nested</h2>
  <p>SASSやLESSのようにネストでかけるプラグイン。&で繋ぐ。</p>
</section>

<section id="cssnext">
  <h2>cssnext</h2>
  <p>W3Cが将来採用する予定の書き方ができる。例えば変数は「:root」で設定して「var(--hoge);」に適用される。<br>
    LESSは@、SASSは$だが将来的には--になりそう。
  </p>
</section>
    
    
</section>
@use postcss-cssnext;
@use postcss-nested;

:root {
  --h2cl: blue;
}

#postcss h1 {
  font-size: 40px;
  color: red;
}

#nested {
  background: #eee;
  padding: 10px;
  margin: 0 0 10px;
  & h2 {
    color: blue;
  }
}

#cssnext {
  background: #eee;
  padding: 10px;
  margin: 0 0 10px;
  & h2 {
  color: var(--h2cl);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.