吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

&(アンパサンド)の使い方

2014年2月26日 / category : reference-sass, sass

&(アンパサンド)の使い方を紹介します。

セレクタの後ろに「&」を付けることで、親セレクタを指定することができます。

Sass
#main{

	width: 960px;

	#wrap & {
		width: 100%;
	}

}
CSS – コンパイル後
#main {
  width: 960px;
}
#wrap #main {
  width: 100%;
}

「& + 擬似クラス」の指定の方法で、擬似クラスを指定できます。

Sass
a{
	color: #333;

	&:hover{
		color: #ccc;
	}

}
CSS – コンパイル後
a {
  color: #333;
}
a:hover {
  color: #ccc;
}

「& + クラス名」の指定の方法で、「タグ名 + クラス名」の指定ができます。

Sass
div{

	float: none;

	&.left{
		float: left;
	}

	&.right{
		float: right;
	}

}
CSS – コンパイル後
div {
  float: none;
}
div.left {
  float: left;
}
div.right {
  float: right;
}