具有伪类的指南针 (SASS) 规则答案

【问题标题】：Compass (SASS) rule with pseudo class具有伪类的指南针 (SASS) 规则
【发布时间】：2015-07-06 22:15:53
【问题描述】：

是否可以为元素生成正常状态和其他一些伪状态的 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;
}

什么不符合预期，加上我必须为颜色写两次规则。

【问题讨论】：

【解决方案1】：

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

$state-info-text: #538DA7;

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

编译为

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

【讨论】：

【解决方案2】：

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

$state-info-text: red;

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

给出输出：

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

【讨论】：

@extend 将组合选择器。 .heading-link:hover 将获得.heading-link 的所有属性。这可能是不可取的。 Example.
可能不是，也可能是:)