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

我正在一个sass样式表，其中我希望使用calc元素来动态地调整一些内容。由于calc元素没有被标准化，我需要定位calc()，-moz-calc()和-webkit-calc()。

有没有办法为我创建一个mixin或函数，我可以传递一个表达式，以便它将生成所需的标签，然后可以设置为宽度或高度？

解决方法

这将是一个基本的 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);
}

您可能想要在不支持calc时包括“默认”值。