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

Question

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

什么了我想要做的是相互匹配:after元素的background-color其父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; 
    } 
}