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

2018年10月18日

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

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

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

変数の名称は自由です。今回は$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;
}

Toshimichi Suekane