如何创建calc mixin作为表达式传递以生成标签？

它将是带有参数的基本mixin，幸运的是，表达式在受支持的范围内不是特定于浏览器的：

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

.test {
  @include calc(width, "25% - 1em");
}

将呈现为

.test {
  width: -webkit-calc(25% - 1em);
  width: calc(25% - 1em);
}

当不支持calc时，您可能需要包括一个“默认”值。

另一种写法：

@mixin calc($prop, $val) {
  @each $pre in -webkit-, -moz-, -o- {
    #{$prop}: $pre + calc(#{$val});
  } 
  #{$prop}: calc(#{$val});
}

.myClass {
  @include calc(width, "25% - 1em");
}

我认为这是一种更优雅的方式。