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 中没有这样的东西。您需要使用 mixin 来获得所需的 DRYness。

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

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

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