例えばボタンのスタイルにバリエーションをもたせたい場合、普通にSassを書くと以下のように書くことを検討されるかと思います。
Sass
.button
color: gray
&.button
&--primary
color: red
CSS
.button {
color: gray;
}
.button.button--primary {
color: red;
}
変数「$this」に自分自身「&」を代入する
変数の名称は自由です。今回は$thisとします。
Sass
.button
color: gray
$this: & // $thisに.button(&)を代入
先ほど$thisに代入した変数を#{$this}で呼び出します。
Sass
.button
color: gray
$this: &
#{$this}--primary
color: red
CSS
.button {
color: gray;
}
.button .button--primary {
color: red;
}
上記の状態は意図したものではありませんので、さらに&を使い変数#{$this}を呼び出してあげることで以下のように利用することが可能となります。
Sass
.button
color: gray
$this: &
{$this}--primary
color: red
CSS
.button {
color: gray;
}
.button.button--primary {
color: red;
}