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

2014年06月23日
follow us in feedly

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の基本機能ですが、使用せずにネストを利用するとソースの可読性が悪くなりもったいないです。
うまく活用して構造の把握がしやすいソースにしましょう。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ