Używanie zmiennych dla właściwości CSS w Sassie

Question

Piszę @mixin z pewną matematyką, która oblicza procentową szerokość elementu, ale ponieważ jest bardzo przydatna, chciałbym użyć tej samej funkcji również dla innych właściwości, takich jak marginesy i paddings.

Czy istnieje sposób przekazania nazwy właściwości jako argumentu do mixin?

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

Answer 1

Trzeba użyć interpolation (np. #{$var}) na zmienną w celu Sass traktować go jako właściwość CSS. Bez tego po prostu wykonujesz przypisanie zmiennych.

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

Answer 2

Oprócz odpowiedzi @rcorbellini

Można użyć zmiennej ciąg i razem

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

    margin-#{$direction}: 10px; 

}