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