-1

The following mixin isn't compiling into CSS, and I can't figure out why. It doesn't give any errors.

CSS Output is here:

@mixin calc-height($element, $percentage, $pixels) {
  $element: -moz-calc(#{$percentage} - #{$pixels});
  $element: -webkit-calc(#{$percentage} - #{$pixels});
  $element: -o-calc(#{$percentage} - #{$pixels});
  $element: calc(#{$percentage} - #{$pixels});
}

.white-triangle {
  width: 0;   height: 0;   
  border-top: 30px solid transparent;  
  border-bottom: 30px solid transparent;
  border-right: 20px solid white;
  position: absolute;
  @include calc-height("top", "50%", "15px");
}
Elijah Murray
  • 2,132
  • 5
  • 30
  • 43

1 Answers1

1

Oh I figured it out. You just needed to call the element variable like so:

 @mixin calc-height($element, $percentage, $pixels) {
   #{$element}: -moz-calc(#{$percentage} - #{$pixels});
   #{$element}: -webkit-calc(#{$percentage} - #{$pixels});
   #{$element}: -o-calc(#{$percentage} - #{$pixels});
   #{$element}: calc(#{$percentage} - #{$pixels});
 }
Josh
  • 140
  • 7
  • `SASS` can actually accept them either way, but it still doesn't compile the mixin. – Elijah Murray Mar 25 '14 at 23:42
  • Tested and you were right. Top in your example test was flat out being omitted. Would be nice if sass simply worked that way without the whole " #{} " syntax. – Josh Mar 25 '14 at 23:51