css - 带有伪类的 compass (SASS) 规则

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

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

DEMO

$state-info-text: #538DA7;

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

编译为

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