我如何创build一个calc mixin作为expression式来生成标签？
我正在使用一个sass样式表，我希望使用calc元素dynamic调整一些内容。 由于calc元素还没有标准化，我需要定位calc() ，- -moz-calc()和-webkit-calc() 。
有没有办法让我创build一个mixin或函数，我可以传递一个expression式，以便它将生成所需的标签，然后可以设置为width或height ？
这将是一个基本的mixin和一个参数 ，幸好expression式在支持的范围内不是特定于浏览器的：
@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的情况下包含“默认”值。
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)); }
使用calc可以很容易地使用unquote特性来实现：
$variable: 100% height: $variable //for browsers that don't support the calc function height:unquote("-moz-calc(")$variable unquote("+ 44px)") height:unquote("-o-calc(")$variable unquote("+ 44px)") height:unquote("-webkit-calc(")$variable unquote("+ 44px)") height:unquote("calc(")$variable unquote("+ 44px)")
将呈现为：
height: 100%; height: -moz-calc( 100% + 44px); height: -o-calc( 100% + 44px); height: -webkit-calc( 100% + 44px); height: calc( 100% + 44px);
你也可以尝试按照上面的build议创buildmixin，但我的做法略有不同：
$var1: 1 $var2: $var1 * 100% @mixin calc($property, $variable, $operation, $value, $fallback) #{$property}: $fallback //for browsers that don't support calc function #{$property}: -mox-calc(#{$variable} #{$operation} #{$value}) #{$property}: -o-calc(#{$variable} #{$operation} #{$value}) #{$property}: -webkit-calc(#{$variable} #{$operation} #{$value}) #{$property}: calc(#{$variable} #{$operation} #{$value}) .item @include calc(height, $var1 / $var2, "+", 44px, $var1 / $var2 - 2%)
将呈现为：
.item { height: 98%; height: -mox-calc(100% + 44px); height: -o-calc(100% + 44px); height: -webkit-calc(100% + 44px); height: calc(100% + 44px); }
另一种写法是：
@mixin calc($prop, $val) { @each $pre in -webkit-, -moz-, -o- { #{$prop}: $pre + calc(#{$val}); } #{$prop}: calc(#{$val}); }
我认为这是更优雅的方式。
