Using variables for CSS properties in Sass

sass mixins
Laura Silvani picture Laura Silvani · Mar 8, 2013 · Viewed 13.4k times · Source

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));
}

Answer

rcorbellini picture rcorbellini · Mar 8, 2013

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));
}

Related questions

Syntax for if/else condition in SCSS mixin

Hi I'm trying to learn SASS/SCSS and am trying to refactor my own mixin for clearfix what I'd like is for the mixin to be based on whether I pass the mixin a width. thoughts so far (pseudo code …

Read More
Sass - Converting Hex to RGBa for background opacity

I have the following Sass mixin, which is a half complete modification of an RGBa example: @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } I have applied $opacity ok, but now I am a stuck with the $…

Read More
Doing math on variable argument Sass mixins

I like to use rem units with pixel fallbacks for my CSS sizing and am trying to make mixins to help with that. For font-size, this is easy: @mixin font-size($size) { font-size: $size + px; font-size: ($size / 10) + rem; } But for padding, …

Read More