About

福岡生活とWeb制作がメインのブログです。福岡在住のフロントエンジニアでECサイトの運営(ディレクション+フロント周りの制作)をやっています。


Search


Category


Tags


Archive


Scss & ~ & は要素と要素が隣接した際にスタイルを適用する

  • 投稿日:2017年6月4日
  • カテゴリーとタグ:css

ぱっと見たときは、「 & ~ & 」ってなにそれ!?と思いましたが、使うと何気に便利な記述方でした。
覚えておくといいかも。

HTML

以下のようなHTMLがあったとします。
.sectionでエリアを区切るようなHTMLで、この.sectionで複数回繰り返し使うので、要素間に余白をとりたい。通常は.section に margin-bottom をつければ良いのですが、最後の要素には余白をつけたくない。というときに、この「 & ~ & 」がいい感じにスタイルを適用してくれます。

  <div class="section">
    <h2>Title</h2>
    <p>text</p>
    <ul>
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
  </div>

  <div class="section">
    <h2>Title</h2>
    <p>text</p>
    <ul>
      <li>list</li>
      <li>list</li>
      <li>list</li>
    </ul>
  </div>

SCSSの記述

要素間に適用するには「& ~ &」で、その中にスタイルを記述するだけ。

.section {
  // このsectionの要素にスタイルを適用
  background-color: #aaa;
  padding: 10px;

  // sectionとsectionが隣接した際に、後ろに来る要素にスタイルが適用される
  & ~ & {
    margin-top: 30px;
  }
}

コンパイル結果

コンパイルされると「& ~ &」が「.section ~ .section」になっているのがわかります。

.section {
  background-color: #aaa;
  padding: 10px; }
  .section ~ .section {
    margin-top: 30px; }