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;
}

ご相談をお待ちしております

エクスコード株式会社は、次のようなご要望やお悩みを持つお客様に寄り添い、ご期待に応えます。

  • なるべく早くプロトタイプを作って、動かしてみたい。
  • ホームページやアプリを作ってみたいが、やり方も予算感も全く分からない。
  • 話をきちんと聞いて、意見を反映させたホームページやアプリを作って欲しい。

ご相談・お見積もりはこちら

メニュー