@ Sass

ルールのネスト

ネストは、Sass の中でも一番よく使う機能で、CSS を HTML の構造に合わせて入れ子で書いていくことができます。

ネストの基本

次の HTML に CSS を適用する場合を考えて見ます。

sample.html

<div id="main">
  <section>
    <h1>見出し</h1>
    <div class="sample">sample</div>
    <section>
      <h2>見出し</h2>
      <p>段落</p>
      <p class="notes">注意書き</p>
      <ul>
        <li>リスト</li>
      </ul>
    </section>
    <section>
      <h2>見出し</h2>
      <p>段落</p>
    </section>
  </section>
<!-- /#main --></div>

通常の CSS では、次のようにそれぞれの要素にスタイルを指定するために、子孫セレクタを使い、HTML の階層をたどって書いていくことが多いと思います。

styles.css

#main section h1 {
  font-size: 2.5rem;
  color: blue;
}
#main section section {
  margin-bottom: 50px;
}
#main section section h2 {
  font-size: 1.5rem;
}
#main section section p, #main section section ul {
  margin-bottom: 1.5rem;
}
#main section section p.notes {
  color: red;
}

Sass では、セレクターの後に{・・・}(ブレス)を使って HTML のツリー構造と同じ形式で記述することができます

ネストして記述することでCSSの記述も減り、どこに何のプロパティが書いてあるかが見やすくなるため、可読性とメンテナンスが向上します。

styles.scss

#main {
  section {
    h1 {
      font-size: 2.5 rem;
      color: blue;
    }
    section {
      margin-bottom: 50 px;
      h2 {
        font-size: 1.5 rem;
      }
      p, ul {
        margin-bottom: 50px;
      }
      p.notes {
        color: red;
      }
    }
  }
}

子孫セレクタ以外のセレクタ

子孫セレクタ以外のセレクタ(子セレクタ・隣接セレクタ)を使う場合は次のように記述することができます。

styles.scss

#main {
  section {
    + section {
      margin-top: 50px;
    }
    > h1 {
      font-size: 140%;
    }
  }
}

コンパイル後の CSS は次のようになります。

styles.css

#main section + section {
  margin-top: 50px;
}
#main section > h1 {
  font-size: 140%;
}

@media のネスト

ネストはメディアクエリでも使うことができます。

styles.scss

#main {
  float: left;
  width: 640px;
  @media screen and (max-width: 640px) {
     float: none;
     width: auto;
   }
}

コンパイル後の CSS は次のようになります。

styles.css

#main {
  float: left;
  width: 640px;
}
@media screen and (max-width: 640px) {
  #main {
    float: none;
    width: auto;
  }
}