在SASS中，是否可以将子元素规则的值与父元素的规则匹配？

Question

我们假设你想要h2几个，并且它们都是不同的颜色，并且它们都有一个:after元素是相同的颜色。

我想要做的是将每个background-color元素的:after与其父h2 color相匹配。由于它们都使用颜色属性，因此在这种情况下它应该是有效的。

我们知道您可以在SASS中嵌套子元素，如下所示：

h2{
    font-weight: bold;
    &:after{
        height:4px;
    }
}

有没有办法将儿童规则的值与父母规则的值相匹配？有这样的事吗？如果有，那么正确的语法是什么？我似乎无法找到任何指向答案的内容。

h2{
    font-weight: bold;
    color: #093261;

    &:after{
        height:4px;
        width:50px;
        content:'';
        display: block;
        position: relative;
        bottom: 0;

        /* this is what I'm trying to accomplish: */
        background: &:color
    }
}

Answer 1

我建议使用SASS变量或@extend所以：

$headercolor: #093261;

h2 {
    font-weight: bold;
    color: $headercolor;

    &:after{
        height:4px;
        width:50px;
        content:'';
        display: block;
        position: relative;
        bottom: 0;

        /* this is what I'm trying to accomplish: */
        background: &:color
        /* variable */
        background: $headercolor;
    }
}

或：

h2 {
    font-weight: bold;
    color: #093261;

    &:after{
        height:4px;
        width:50px;
        content:'';
        display: block;
        position: relative;
        bottom: 0;

        /* this is what I'm trying to accomplish: */
        background: &:color
        /* extend */
        @extend h2;
    }
}