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

Question

我正在处理一个 sass 样式表，我希望在其中使用 calc 元素来动态调整某些内容的大小。由于 calc 元素尚未标准化，我需要针对 calc()、-moz-calc() 和 - webkit-calc().

有没有办法让我创建一个 mixin 或函数，我可以将表达式传递给它，以便它生成所需的标签，然后可以将这些标签设置为 width 或 height ?

Answer 1

这将是一个基本的 mixin with an argument ，谢天谢地，这些表达式在支持的范围内不是特定于浏览器的:

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

当不支持计算时，您可能希望包含一个“默认”值。