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


次回「 変数・演算」

関連

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

Reader Interactions

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

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

最初のサイドバー

Author

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

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • macでKindle電子書籍の作成(epubから.mobi)
    macでKindle電子書籍の作成(epubから.mobi)
  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • ダークソウル リマスター版の壁紙
    ダークソウル リマスター版の壁紙
  • underscoresでWordPressのテーマを作る1(導入)
    underscoresでWordPressのテーマを作る1(導入)
  • SassでFont Awesomeを使う
    SassでFont Awesomeを使う
  • ParallelsのCentOSにSSHで接続
    ParallelsのCentOSにSSHで接続
  • Sassの初期設定〜コンパイル
    Sassの初期設定〜コンパイル

タグ

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

Copyright © 2021 mocurot ・ ログイン