Reputation: 3268
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.
Upvotes: 1
Views: 478
Reputation: 926
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.
Upvotes: 6