在sass中獲取父屬性值

Question

我正在嘗試爲我的應用程序使用sass創建頂級<a>樣式。網站上的大多數鏈接都是綠色的，所以我將其作爲一種風格。 （我用指南針爲darken功能）

a { 
    color: green; 

    &:hover { 
    color: darken(green, 10%); 
    } 
} 

然而，在某些情況下，鏈接是不是綠色的。在這些情況下，我必須指定文本顏色和懸停顏色，否則它將默認懸停爲綠色。我想知道是否有辦法做到這一點DRYER。理想情況下，我將能夠獲得父類的顏色，就像這樣。

a { 
    color: green; 

    &:hover { 
    color: darken(parent(color), 10%); 
    } 
} 

這樣，懸停將始終默認爲具體的顏色。這有意義嗎？是這樣的可能嗎？如果不是，處理這個問題的最好方法是什麼？ Mixin？

謝謝！

Answer 1

我會使用一個混合：

@mixin link($color) { 
    a { color: $color}; 

    &:hover { color: darken($color, 10%) }; 
} 

.foo { 
    @include link(green); 
} 

渲染CSS：

.foo a { color: green; } 

.foo a:hover { color: #004d00; } 

Answer 2

你問什麼是不可能的上海社會科學院。 SASS不會構建包含所有元素和屬性的對象模型（沒有HTML就不可能）。

mixin是適用於可重用案例的適當解決方案，但對於臨時案例來說，這是一個矯枉過正的案例。

只需使用一個變量：

a { 
    $link-color: green; 
    color: $link-color; 

    &:hover { 
    color: darken($link-color, 10%); 
    } 
} 

請注意，您可將變量移動到一個單獨的部分，你存儲所有的變量。