Reputation: 1413
I'm trying to write scss inside haml file. I created a mixin called render which works perfectly inside an actual scss file but gives an error like -
Here's the actual code - (it's inside component.haml file)
:scss
@mixin render($property, $value)
{
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-o-#{$property}: $value;
-ms-#{$property}: $value;
#{$property}: $value;
}
h2
{
@include render(transition, all 0.2s ease);
}
you can find the code at http://codepen.io/Kingstheory/pen/gEwDl as well. I can't figure out what's wrong with it. It works great inside a scss file.
Upvotes: 3
Views: 352
Reputation: 79813
Haml is interpreting all the #{...}
s that appear in the filter body as needing Ruby interpolation, and processing them before the text is passed to SCSS. Since there is no $property
global defined they all evaluate to nil
and so appear as an empty strings after interpolation. So the text that actually is seen by Sass is something like:
@mixin render($property, $value)
{
-webkit-: $value;
-moz-: $value;
-o-: $value;
-ms-: $value;
: $value;
}
The last line of the mixin, : $value;
is invalid SCSS and is what is causing the error.
In order to pass #{..}
unchanged to Sass you need to escape the #
character with \
:
:scss
@mixin render($property, $value)
{
-webkit-\#{$property}: $value;
-moz-\#{$property}: $value;
-o-\#{$property}: $value;
-ms-\#{$property}: $value;
\#{$property}: $value;
}
h2
{
@include render(transition, all 0.2s ease);
}
Upvotes: 4