在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; 
    } 
}