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

是。您可以使用内置highlightText("ar", document.getElementById("highlight_only_this")); 功能的Sass。

@extend

给出输出：

$state-info-text: red;

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

Answer 2

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

DEMO

$state-info-text: #538DA7;

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

编译到

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