[Sass]親セレクタの参照ができる&(アンパサンド)の使い方

  • あとで読みたい人は…

わんこそば、@cappeeです。ついにSassの本ができましたね。

Web制作者のためのSassの教科書」かなり参考になりました。

ちゃんと基本から勉強しないとダメですね(>_<)

今日は以外と使いこなせていなかった&(アンパサンド)についてです。

&(アンパサンド)とは

親セレクタの参照ができます。

擬似セレクタやセレクタの前に記述する

これは私もよく使っていてコードの階層がとてもわかりやすくなるので便利ですよね。

Sass(SCSS)

.link{
  text-decoration:none;
  &:hover{
    text-decoration:underline;
  }
  &.off{
    color:gray;
  }
}

コンパイル後のCSS

.link{text-decoration:none;}
.link:hover{text-decoration:underline;}
.link.off{color:gray;}

セレクタの後に記述する

セレクタの後に記述するとルールセット内の親要素をすべて参照するので、ページ単位でデザインやレイアウトを変えたい場合に便利です。
私はこれを使っていなくてもっと早く基本から勉強していればよかった。。

下記はお問い合わせなどのフォーム系ページだけサイドバーがなかった場合に、メインコンテンツ部分の横幅を広げたい時の例です。

Sass(SCSS)

#main{
  width:640px;
  #form-page &{
    width:100%;
  }
}

コンパイル後のCSS

#main{width:640px;}
#form-page #main{width:100%;}

ひとつ注意していただきたいのは、3階層以上になった場合、&を使うと上の階層で指定した親要素すべてを参照するということです。
下記のように3階層目で.section &と記述した場合「#main .section .box」とはならず、「.section #main .box」と出力されます。

Sass(SCSS)

#main{
  width:640px;
  .box{
    margin:10px;
    .section &{
    margin:0;
    }
  }
}

コンパイル後のCSS

#main{width:640px;}
.box{margin:10px;}
.section #main .box{margin:0;}

期待した通りの結果にするには、当たり前ではありますが下記のように普通に記述していれば特に問題ありませんね。

Sass(SCSS)

#main{
  width:640px;
  .section{
    margin:0;
    .box{
    margin:10px;
    }
  }
}

以上、&(アンパサンド)の基本の使い方でした!

私のように知らなかった方はSassの基礎をきっちり身につけてはいかがでしょう?

泣くほど早い…今すぐ使える便利なmixin集も公開していますのでぜひご覧ください!

Pocket
article clipper [Sass]親セレクタの参照ができる&(アンパサンド)の使い方

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>