Uso delle variabili per le proprietà CSS in Sass

Question

Sto scrivendo un @mixin con qualche calcolo matematico che calcola la larghezza percentuale di un elemento, ma poiché è molto utile vorrei usare la stessa funzione anche per altre proprietà, come margini e imbottiture.

C'è un modo per passare il nome della proprietà come argomento a un mixin?

@mixin w_fluid($property_name, $w_element,$w_parent:16) { 
    $property_name: percentage(($w_element/$w_parent)); 
} 

Answer 1

è necessario utilizzare interpolation (ad es. #{$var}) sul tuo variabili in modo che Sass di trattarlo come una proprietà CSS. Senza di esso, stai solo eseguendo l'incarico variabile.

@mixin w_fluid($property_name, $w_element, $w_parent:16) { 
    #{$property_name}: percentage(($w_element/$w_parent)); 
} 

Answer 2

Oltre alla risposta @rcorbellini

È possibile utilizzare stringhe e variabili insieme

@mixin margin($direction) { // element spacing 

    margin-#{$direction}: 10px; 

}