Sassの基本機能である親セレクタの参照が可能な&(アンパサンド)についてまとめます。

Sponsored Link

Sassで最も使う機能はCSSをHTMLの記述通りに入れ子で書くことができるネストだと思います。

Sassの基本機能ネスト

通常のCSSの場合は各要素にスタイルを指定するために、以下のように書きます。

body header {
      padding: 0;
}
body header h1 {
      padding: 10px;
      border-left: 5px solid #fff;
}
body header p {
      line-height: 1.7;
      margin-bottom: 20px;
}

これをSassのネストを利用して書くと以下のようになります。

body {
  header {
      padding: 0;
    h1 {
      padding: 10px;
      border-left: 5px solid #fff;
    }
    p {
      line-height: 1.7;
      margin-bottom: 20px;
    }
  }
}

Sassは入れ子にできることによって、通常のCSSと比べ記述量が減ります。また header section に変える場合でも1カ所変更するだけで対応できます。

ネストは非常に便利なのですが、トップページだけheaderのプロパティの値を変えたい場合にどうしたらいいのでしょうか?

まあ難しく考えずに、入れ子の外に以下のように追加すれば対応できます。

body.top {
  header {
      padding: 20px;
  }
}

ただ、この書き方だとせっかくネストを利用して可読性が良くなっているのに、ネストの外に記述しないといけないので台無しです。

そこで、ネストの中で親のセレクタを参照できる方法が&(アンパサンド)です。

親セレクタの参照が可能な&(アンパサンド)

以下のようにセレクタの後に & を書くことで親セレクタを参照できます。

body {
  header {
      padding: 0;
    body.top & {
      padding: 20px;
      }
    h1 {
      padding: 10px;
      border-left: 5px solid #fff;
    }
    p {
      line-height: 1.7;
      margin-bottom: 20px;
    }
  }
}

&(アンパサンド)は1つ上の階層のセレクタを繰り返し記述するので、以下のような擬似クラスにも使えます。

a {
  color: #999;
  &:hover{
    color: #555;
  }
}

&(アンパサンド)はSassの基本機能ですが、使用せずにネストを利用するとソースの可読性が悪くなりもったいないです。
うまく活用して構造の把握がしやすいソースにしましょう。

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。