什么不用这个Mixin编译？

Question

以下mixin没有编译成CSS，我无法弄清楚原因。它没有任何错误。

CSS输出为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");
}

Answer 1

哦，我明白了。你只需要像这样调用元素变量：

 @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});
 }