• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

Sassでネスト

2018-03-16 by mocurot コメントを書く

ネストはSassの中でもよく使う機能のひとつで、CSSをHTMLの構造に合わせて入れ子で書いていくことができます。
このネストを使うことで何度も親要素を書かなくても良くなり、ノードの見通しも良くなるのでメンテナンス性が向上します。


子孫セレクタ

子孫セレクタは、要素の子孫(入れ子構造)にあたる要素。
たとえば、<main>〜<main>の要素に対して以下のようなCSSを書いたとします。

main {
  width: 100%;
}
main section {
  width: 600px;
  margin: auto;
}
main section h1 {
  font: normal 1.4rem/1.6 sans-serif;
  color: red;
}
main section p {
  font-size: 1rem;
  color: black;
}

これをSass(SCSS記法)で書くと次のようになります。

main{
  width: 100%;
  section{
    width: 600px;
    margin: auto;
    h1{
      font: normal 1.4rem/1.6 sans-serif;
      color: red;
    }
    p{
      font-size: 1rem;
      color: black;
    }
  }
}

ネストすることにより、子孫関係を明示して出力されます。

親要素の変更

ネストでメンテナンス性が向上します。例えば、先ほどの指定した<main>〜<main>のスタイルを<div id="content">〜</div>に変更したい場合は

 #content{
  width: 100%;
  section{
.
.
.

と変更するだけで、内包していた要素の親をすべて#contentに変更してくれます。

#content {
  width: 100%;
}
#content section {
  width: 600px;
  margin: auto;
}
#content section h1 {
  font: normal 1.4rem/1.6 sans-serif;
}
#content section p {
  font-size: 1rem;
  color: black;
}

隣接セレクタ、子セレクタ

隣接セレクタは要素同士が直接隣接している場合に適用されるセレクタ。この隣接セレクタもネスト構造に指定することができます。

Tips

  • 隣接セレクタ `+`:要素と要素が直接隣接している場合に適用されるセレクタ。
  • 子セレクタ `>`:親要素の子要素に適用されるセレクタ。孫要素以下は適用されない。
main{
  width: 100%;
  + section{
    margin: 0 auto 50px;
  }
  section{
    width: 600px;
    margin: auto 50px;
    > h1{
      font: normal 1.4rem/1.6 sans-serif;
      color: red;
    }
    p{
      font-size: 1rem;
      color: black;
    }
  }
}

↓ ↓ ↓ ↓ コンパイル ↓ ↓ ↓ ↓

main {
  width: 100%; }
  main + section {
    margin: 0 auto 50px; }
  main section {
    width: 600px;
    margin: auto 50px; }
    main section > h1 {
      font: normal 1.4rem/1.6 sans-serif;
      color: red; }
    main section p {
      font-size: 1rem;
      color: black; }

親セレクタの参照

親セレクタによってスタイルを振り分けたい場合には、親セレクタを参照できる&アンパサンドを使用します。
トップページではmainの幅を変えたい場合を例として見てみましょう。

#home{
  width: 100%;
}
main{
  width: 100%;
  body#home &{
  width: 50%;
  margin: auto;
  }
  section{
  width: 600px;
  margin: auto 50px;
  }
}

↓ ↓ ↓ ↓ コンパイル ↓ ↓ ↓ ↓

#home {
  width: 100%;
}

main {
  width: 100%;
}
body#home main {
  width: 50%;
  margin: auto;
}
main section {
  width: 600px;
  margin: auto 50px;
}

このように#homeを親に持つmainを書き分けてくれるので、親要素が変わったmainでもネスト内に書き込めるて可動性が上がっているのが分かります。


疑似クラスやセレクタからの参照

親要素の参照は疑似クラスやセレクタの前にも使えます。:after、:beforeや、:first-childなどの疑似セレクタ、:hoverや:activeなどの疑似クラスもアンパサンドで親要素を参照して書くことができます。

main{
  width: 100%;
  .gNav{
    width: 50%;
    margin: auto;
    a{
      color: black;
      &:hover{
      color:red;
      }
      &.prev{
        float: left;
        &:before{
          content: "<";
        }
      }
      &.next{
        float: right;
        &:after{
          content: ">";
        }
      }
    }
  }
}

↓ ↓ ↓ ↓ コンパイル ↓ ↓ ↓ ↓

main {
  width: 100%;
}
main .gNav {
  width: 50%;
  margin: auto;
}
main .gNav a {
  color: black;
}
main .gNav a:hover {
  color: red;
}
main .gNav a.prev {
  float: left;
}
main .gNav a.prev:before {
  content: "<";
}
main .gNav a.next {
  float: right;
}
main .gNav a.next:after {
  content: ">";
}

Sassのネストで隣接セレクタや参照を使用することで可読性がアップすることはご理解いただけたでしょうか。
しかし、参照を使用しているセレクタと使用していないセレクタが混在していると逆に可読性が悪くなってしまったりするので、記述ルールを決めて使用することをお勧めします。


次回「 変数・演算」

0
この記事に興味を持っていただけたら
をクリックしてもらえると励みになります!

Filed Under: Sass 関連タグ:HTML, SASS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
mocurot noteの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • さくらのVPSで80/443ポートに繋がらない
    さくらのVPSで80/443ポートに繋がらない
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • SassでCompassを使う
    SassでCompassを使う
  • Sassで@import
    Sassで@import
  • LEMP環境の構築[ルートログインからSSHデーモンの設定]
    LEMP環境の構築[ルートログインからSSHデーモンの設定]

タグ

AMAZON ANKER APPLE APPLE WATCH APPS CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC NGINX NODE.JS NOTE PHP PS4 SASS SCSS SEKIRO SERVER WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン