Using variables for CSS properties in Sass

Question

I am writing a @mixin with some math in it that calculates the percentage width of an element, but since it is very useful I would like to use the same function for other properties too, like margins and paddings.

Is there a way to pass the property name as an argument to a mixin?

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

Envision

Answer 1

You need to use interpolation (eg. #{$var}) on your variable in order for Sass to treat it as a CSS property. Without it, you're just performing variable assignment.

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

Issie

Thanks rcorbellini, I was referencing the property name in the declaration block in the wrong way. Good one is: #{$property_name}. Grazie! – Envision

Answer 2

In addition to the @rcorbellini response

You can use string and variable together

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

    margin-#{$direction}: 10px;

}

Lunular