Calc mixin not compiled correctly

[sebromero]

I would like to use a mixin for the CSS calc function so that the various browser prefixed would be attached. Unfortunately the following mixin will not be compiled correctly:

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

if I call the mixin like @include calc(width, "(50% - (227px / 2))"); the output for the last line will be:

width:calc(#{$expression});

[keegnotrub]

Thanks for the feedback, right now the library I'm using (libsass) appears to have fixed this on their master branch but hasn't released an official new version with the fix so I'm hesitant to update until they do. See https://github.com/hcatlin/libsass/issues/246.

In the meantime, you should be able to use the following as a workaround as it appears just the "calc" keyword is the issue:

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: unquote("calc(#{$expression})");
}

I'll leave this issue open though until it includes the fix from libsass.

[sebromero]

Fantastic, this workaround works perfectly. Thank you!

[keegnotrub]

I believe this should now be fixed with the latest release. Closing for now.