Question

So, I’m just starting to learn SASS, and I thought I’d write a quick mixin to prepend all of the vendor prefixes to a statement. So I wrote this:

@mixin prefix( $style, $value ) {
  $style: $value;
  -o-#{$style}: $value;
  -moz-#{$style}: $value;
  -webkit-#{$style}: $value;
  -ms-#{$style}: $value;
}

header {
  @include prefix( transform, rotate(90deg) );
}

However, for some reason I can’t fathom, this produces the output:

header {
  -o-rotate(90deg): rotate(90deg);
  -moz-rotate(90deg): rotate(90deg);
  -webkit-rotate(90deg): rotate(90deg);
  -ms-rotate(90deg): rotate(90deg); }

Evidently it is substituting the second argument for the first argument. It produces the same output here as on my server. I hope someone can shed some light on why this is happening.

Answer 1

Notice that not only has the value of $style been replaced with the value of $value, but you also aren’t getting the non-prefixed rule – you should have transform: rotate(90deg); as the first output rule before o-transform. That should be a clue that the problem is in your first line.

And it is: that first line should be

#{$style}: $value;

Just like in all the subsequent rules, to get the literal contents of $style to be printed, you have to use the pound-sign decorator. Without it, SASS interprets that line as variable assignment.