CODEWITHSUNDEEP
htmlcssruby-on-railssasshaml
Lordking
Lordking

Reputation: 1413

scss mixin not working inside haml file

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 -

enter image description here

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

Answers (1)

matt
matt

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

Related Questions