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

I am working on a sass stylesheet in which I wish to use the calc element to dynamically size some content. As the calc element has not been standardized, I need to target calc(), -moz-calc(), and -webkit-calc().

我正在开发一个sass样式表，我希望在其中使用calc元素动态调整某些内容的大小。由于calc元素尚未标准化，我需要定位calc（）， - moz-calc（）和-webkit-calc（）。

Is there a way for me to create a mixin or function that I can pass an expression to so that it will generate the required tags that can then be set as a width or height?

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

4 个解决方案

#1

It would be a basic mixin with an argument, thankfully the expressions are not browser-specific within the supported scope:

这将是一个带参数的基本mixin，幸好表达式在支持的范围内不是浏览器特定的：

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

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

Will render as

将呈现为

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

You may want to include a "default" value for when calc is not supported.

您可能希望在不支持calc时包含“默认”值。

#2

Compass offers a shared utility to add vendor prefixes for just such an occasion.

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

#3

Using calc can be accomplised pretty easily using the unquote feature:

使用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)")

will render as:

将呈现为：

height: 100%;
height: -moz-calc( 100% + 44px);
height: -o-calc( 100% + 44px);
height: -webkit-calc( 100% + 44px);
height: calc( 100% + 44px);

You can also try creating the mixin as suggested above, but I do mine slightly different:

您也可以尝试按照上面的建议创建mixin，但我的确略有不同：

$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%)

will render as:

将呈现为：

.item {
height: 98%;
height: -mox-calc(100% + 44px);
height: -o-calc(100% + 44px);
height: -webkit-calc(100% + 44px);
height: calc(100% + 44px);
}

#4

Another way to write it:

另一种写作方式：

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

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

I think this is more elegant way.

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