Ottieni valore attributo padre in sass

Question

Sto provando a creare uno stile di livello superiore <a> per la mia applicazione utilizzando sass. La maggior parte dei collegamenti attraverso il sito sono verdi, quindi ho questo come stile. (Sto usando la bussola per la funzione darken)

a { 
    color: green; 

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

Tuttavia, in alcuni casi, i collegamenti non sono verdi. In questi casi dovrò specificare sia il colore del testo che il colore del passaggio del mouse, altrimenti passerà automaticamente al passaggio del mouse al verde. Mi chiedo se c'è un modo per fare questo DRYer. Idealmente sarei in grado di ottenere il colore delle classi genitore, in questo modo.

a { 
    color: green; 

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

In questo modo il passaggio del mouse sarà sempre predefinito per qualsiasi sia il colore dello specifico. Ha senso ciò? È possibile qualcosa del genere? In caso contrario, qual è il modo migliore per gestirlo? Un mixin?

Grazie!

Answer 1

userei un mixin:

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

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

.foo { 
    @include link(green); 
} 

rendering CSS:

.foo a { color: green; } 

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

Answer 2

Quello che si chiede non è possibile con SASS. SASS non crea un modello a oggetti con tutti gli elementi e le proprietà (è impossibile senza HTML).

Un mixin è una soluzione appropriata per un caso riutilizzabile, ma per un caso ad-hoc è eccessivo.

Basta utilizzare una variabile:

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

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

Si noti che è possibile spostare la variabile in un parziale separata in cui si memorizzano tutte le variabili.