Sass: 変数に自分自身を代入し再利用する

例えばボタンのスタイルにバリエーションをもたせたい場合、普通にSassを書くと以下のように書くことを検討されるかと思います。

.button
  color: gray
  
  &.button
    &--primary
      color: red

.button {
  color: gray;
}
.button.button--primary {
  color: red;
}

変数「$this」に自分自身「&」を代入する

変数の名称は自由です。今回は$thisとします。

.button
  color: gray

  $this: & // $thisに.button(&)を代入

先ほど$thisに代入した変数を#{$this}で呼び出します。

.button
  color: gray

  $this: &
  
  #{$this}--primary
    color: red

.button {
  color: gray;
}
.button .button--primary {
  color: red;
}

上記の状態は意図したものではありませんので、さらに&を使い変数#{$this}を呼び出してあげることで以下のように利用することが可能となります。

.button
  color: gray

  $this: &
  
  &#{$this}--primary
    color: red

.button {
  color: gray;
}
.button.button--primary {
  color: red;
}