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

Question

我正在开发一个sass样式表,我希望使用该calc元素动态调整某些内容的大小.由于calc元素尚未规范,我需要为目标calc(),-moz-calc()和-webkit-calc().

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

Answer 1

这将是一个带参数的基本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时包含"默认"值.

Answer 2

Compass提供了一个共享实用程序,可以为这种场合添加供应商前缀.

@import "compass/css3/shared";

$experimental-support-for-opera: true; // Optional, since it's off by default

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