在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

我更愿意将代码写得更干，就像这样：

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

在SASS中，这可能是类似的吗？

Answer 1

不，Sass中没有类似的东西。你需要使用mixin来获得你正在寻找的干燥。

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

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

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