Get Elternattribut Wert in Sass

Question

Ich versuche, eine Top-Level <a> Styling für die für meine Anwendung mit Sass zu erstellen. Die meisten Links auf der Website sind grün, also habe ich das als Stil. (Ich bin mit Kompass für die darken Funktion)

a { 
    color: green; 

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

jedoch in bestimmten Fällen die Links sind nicht grün. In diesen Fällen muss ich sowohl die Textfarbe als auch die Hover-Farbe angeben, ansonsten wird es standardmäßig auf grün gesetzt. Ich frage mich, ob es einen Weg gibt, diesen DRYer zu machen. Idealerweise wäre ich in der Lage, die Elternklassenfarbe so zu erhalten.

a { 
    color: green; 

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

Auf diese Weise wird der Schwebeflug immer standardmäßig auf die Farbe der spezifischen ist. Macht das Sinn? Ist so etwas möglich? Wenn nicht, was ist der beste Weg, damit umzugehen? Ein Mixin?

Danke!

Answer 1

würde ich einen mixin verwenden:

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

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

.foo { 
    @include link(green); 
} 

Rendered CSS:

.foo a { color: green; } 

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

Answer 2

Was Sie fragen, ist mit SASS nicht möglich. SASS erstellt kein Objektmodell mit allen Elementen und Eigenschaften (das ist ohne HTML nicht möglich).

Ein Mixin ist eine geeignete Lösung für einen wiederverwendbaren Fall, aber für einen Ad-hoc-Fall ist es ein Overkill.

Verwenden Sie einfach eine Variable:

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

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

Beachten Sie, dass die Variable in einem separaten Teil bewegen können, wo Sie alle Ihre Variablen.