Sassを使った効率的CSSコーディング術

2-1. セレクタをネスト(入れ子)して記述する

Sassが利用できる環境の準備はできましたか?ここからはいよいよSassの使い方を解説していきます。まずはセレクタをネスト(入れ子)して記述する方法を解説します。

  • HTML・CSS

公開日:2019/06/10最終更新日:2019/06/11

スポンサーリンク

1.セレクタのネスト(入れ子)とは?

例えば以下のようなHTMLがあったとします。

<nav>
  <ul>
    <li><a href="#1">りんご</a></li>
    <li><a href="#2">バナナ</a></li>
    <li><a href="#3">みかん</a></li>
  </ul>
</nav>

このようにnav > ul > liというふうに入れ子状になった親子要素を装飾するときに、Sassでは以下のような記述でセレクタを指定することができます。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

コンパイルしてみると以下のようになります。

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sassではこのような入れ子状のセレクタ指定をする際、省略した書き方をすることができます。カッコの中にさらにカッコがあるという書き方で、セレクタをネストさせることができるわけです。

2.子セレクタや隣接セレクタを指定する

ネストは親子セレクタの指定だけでなく、いろいろな使い方があります。

子セレクタを指定する

さきほどの例だと正確には子孫セレクタの指定になりますので、子セレクタを指定する方法です。

ul{
  > li{
    list-style: none;
  }
}

コンパイル結果

ul > li {
  list-style: none;
}

隣接セレクタを指定する

特定のセレクタに隣接したセレクタを指定する際も、ネストが使えます。

h1{
  + p{
    color: #f00;
  }
}

コンパイル結果

h1 + p {
  color: #f00;
}

3.擬似クラスや疑似要素を指定する

擬似クラスである「:hover」や、疑似要素の「:after」「:before」を指定するのにも、ネストが使えます。ネストする際に「&(アンパサンド)」を付けます。

a{
  color: #f00;
  &:hover{
    text-decoration: underline;
  }
  &:after{
    content: "hoge";
    display:block;
  }
}

コンパイル結果

a {
  color: #f00;
}
a:hover {
  text-decoration: underline;
}
a:after {
  content: "hoge";
  display: block;
}

4.プロパティをネストする

backgroundやpadding、margin、borderなどには` - `を付けて指定できるオプションのようなプロパティがあります。例えばbackgroundならbackground-image、background-size、background-color、background-repeat、background-size…などです。Sassのネストを使うと、これらも省略して書くことができます。

div{
  background: #f00{
    image: url("hoge.jpg");
  }
}

コンパイル結果

div {
  background: #f00;
  background-image: url("hoge.jpg");
}

5.メディアクエリをネストする

レスポンシブウェブデザインに欠かせない「メディアクエリ」もネストで記述することができます。

div {
  margin: 20px;
  @media all and (max-width:480px) {
    margin: 0;
  }
}

コンパイル結果

div {
  margin: 20px;
}
@media all and (max-width: 480px) {
  div {
    margin: 0;
  }
}

 

ネストを使うとコードの量が減り、読みやすくなるので、メンテナンス性があがります。ただし、ネストしすぎるとメンテナンス性が逆に下がりますので注意です。コーディングのルールで何回までネストして良いか決めておくと良いでしょう。目安としては3回ぐらいまでが良いでしょう。

理解度チェック

スポンサーリンク

このレッスンの著者