罗盘 (SASS) 规则与伪 class

Question

是否可以为正常状态和其他伪状态的元素生成 css 规则，如下所示：

.heading-link, .heading-link:hover {
    color: red;
}

和

.heading-link {
    color: $state-info-text;
    &:hover {
        color: $state-info-text;
    }
}

我得到了

.heading-link {
  color: #538DA7;
}
.heading-link:hover {
  color: #538DA7;
}

哪里不对，再加上颜色的规则要写两遍

Answer 1

是的。您可以为此使用 Sass 的内置 @extend 函数。

$state-info-text: red;

.heading-link {
    color: $state-info-text;
    &:hover {
        @extend .heading-link;
    }
}

给出输出：

.heading-link, .heading-link:hover {
  color: red;
}

Answer 2

除了嵌套块内的其他选择器之外，您还可以单独使用父选择器 (&)。

$state-info-text: #538DA7;

.heading-link {
    &, &:hover {
        color: $state-info-text;
    }
}

编译为

.heading-link, .heading-link:hover {
  color: #538DA7;
}

Compass (SASS) rule with pseudo class