sass - SASS で background-color などの現在のクラスのプロパティにアクセスする

Question

SASS で作業しているときに、現在のクラスのプロパティを参照したいことがよくあります。通常、これは、物事をより再利用可能にしたり、相互作用を処理したりする方法として登場します。例えば：

.circle
  background-color: $brandColor
.circle:hover
  background-color: $brandColor + 50
.square
  background-color: $brandColor1
.square:hover
  background-color: $brandColor1 + 50

次のように、コードをより DRYly に記述したいと思います。

.circle
  background-color: $brandColor
.square
  background-color: $brandColor1
.circle:hover,
.square:hover
  background-color: &background-color + 50

SASSでこれ、または同様のことが可能ですか?

Answer 1

いいえ、Sass ではそのようなことはありません。探している DRYness を取得するには、ミックスインを使用する必要があります。

@mixin colorize($color) {
    background-color: $color;

    &:hover {
        background-color: $color + 50;
    }
}

.circle {
  @include colorize($brandColor1);
}
.square {
  @include colorize($brandColor2);
}