这个 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});
 }