<section id="stylus">
<h1>Stylus事始め</h1>
<p class="lede">CodepenのSettingの旅CSS編第4回。今回はStylus。LESSとSASSのいいとこ取りと言われるそうな。</p>
<section id="kihou">
    <h2>Stylus記法</h2>
  <p>Stylusはフレキシブルで色々な書き方ができる。</p>
  <ul>
    <li>LESS、SCSSのような書き方</li>
    <li>Sassのような書き方</li>
    <li>さらに省略した書き方</li>
    </ui>
 <span class="bikou">そして、これらが混在しててもOK!!</span>
    </p>
  </section>
<section id="less">
<h2>LESS、SCSSのような書き方</h2>
<p>LESSはCSSと記法が近く、初めてメタ言語に手を出す人にとっては読みやすく手を出しやすい。<br>
Rubyと似た書き方でスタイリッシュだったSASSもLESSの影響で、CSSに近いSCSS記法を後から作った。<br>
Stylusも同様の書き方ができる。<br>
 <span class="bikou">この段落はその書き方で書いています。</span>
    </p>
  </section>
  
<section id="sass">
<h2>Sassのような書き方</h2>
<p>波括弧{}や行末セミコロン;を省略するなど、スタイリッシュな記法。その代わりにインデントは厳密に入れなければならない。<br>
SassはRubyで動き、記法もRubyと似ているらしい。覚えるのに少し学習がいるが、ネクスが深い時に波括弧の数を気にしなくていいので、慣れればいいかもしれない。<br>
そしてStylusも同様の書き方ができる。<br>
 <span class="bikou">この段落はその書き方で書いています。</span>
    </p>
  </section>

  <section id="stylus">
<h2>さらに省略した書き方</h2>
<p>そしてこれは、Stylusのオリジナルな記法だが、プロパティのコロン:も省略ができる。<br>
  <span class="test1">テスト1. コロンもセミコロンも省略</span><br>
  <span class="test2">テスト 2. コロンだけ省略</span><br>
  <span class="test3">テスト3. セミコロンだけ省略</span><br>
  <span class="test4">テスト4. 何も省略しない</span><br>
→結果. 全部効いた!フレキシブル!<br>
  <span class="bikou">この段落はその書き方で書いています。</span><br>
  <span class="bikou">親要素の参照は「&」。これはLESSもSassも一緒。</span><br>
    </p>
  </section>
</section>
/*CSS記法*/
#stylus h1 {
  font-size:  40px;
}

#kihou h2 {
  font-size: 30px;
  color: red;
}

#kihou .bikou {
  font-size: 0.8em;
}

#kihou .bikou:before {
  content: "※";
}

/*LESS, SACC記法*/
#less {
  background: #eee;
  padding: 10px;
  margin: 0 0 10px;
h2 {
  font-size: 30px;
  color: blue;
  }
.bikou {
  font-size: 0.8em;
  &:before {
    content: "※";
  }
}
}

/*Sass記法*/
#sass
    background: #eee
    padding: 10px
    margin: 0 0 10px
    h2 
      font-size: 30px
      color: blue
    .bikou
      font-size: 0.8em
      &:before
        content: "※"

/*Stylusオリジナル*/
#stylus
    background #eee
    padding 10px
    margin 0 0 10px
    h2 
      font-size 30px
      color blue
    .bikou
      font-size 0.8em
      &:before
        content "※"
     .test1
       color red
     .test2
       color red;
     .test3
       color: red
     .test4
       color: red;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.