記事の内容
アンパサンド(&)
アンパサンド(&)は親セレクタを参照し、効率化や保守性の向上ができます。
&に親セレクタ名が挿入されるイメージだと分かりやすいかもです。
子セレクタの前を参照
記法
.クラス名 {
プロパティ : プロパティ値;
&:擬似クラス {
プロパティ : プロパティ値;
}
&.クラス名 {
プロパティ : プロパティ値;
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="cssのリンク先" />
<title>親セレクト(子セレクタの前を参照)</title>
</head>
<body>
<p>ホバーして</p>
<button class="btn red">赤色ボタン</button>
<button class="btn blue">青色ボタン</button>
</body>
</html>以下のcssとscssは同一デザイン記述になります
Sass
.btn {
background-color: none;
border-radius: 5px;
border: solid 1px black;
&:hover {
color: white;
&.red {
background-color: red;
}
&.blue {
background-color: blue;
}
}
}css
.btn {
background-color: none;
border: solid 1px black;
border-radius: 5px;
}
.btn:hover {
color: white;
}
.btn:hover.red {
background-color: red;
}
.btn:hover.blue {
background-color: blue;
}出力結果
ホバーして
子セレクタの後に記述
Sass
section {
width: 360px;
#hoge & {
width: 480px;
}
.fuga & {
width: 240px;
}
}css
section {
width: 360px;
}
#hoge section {
width: 480px;
}
.fuga section {
width: 240px;
}名前の一部として使用する
Sass
.box {
width: 200px;
height: 200px;
&__element {
padding: 1em;
&--modifier {
background-color: #bfdd9e;
}
}
}css
.box {
width: 200px;
height: 200px;
}
.box__element {
padding: 1em;
}
.box__element--modifier {
background-color: #bfdd9e;
}