CSS 如何创建 calc mixin 以作为表达式传递以生成标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10826064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a calc mixin to pass as an expression to generate tags?
提问by secretformula
I am working on a sass stylesheet in which I wish to use the calcelement to dynamically size some content. As the calcelement 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 widthor height?
有没有办法让我创建一个 mixin 或函数，我可以将表达式传递给它，以便它生成所需的标签，然后可以将其设置为 awidth或height？
回答by o.v.
It would be a basic mixin with an argument, thankfully the expressions are not browser-specific within the supported scope:
这将是一个带有参数的基本混合，幸运的是表达式在支持的范围内不是特定于浏览器的：
@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 时包含一个“默认”值。
回答by steveluscher
Compass offers a shared utilityto 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));
}
回答by aaronmallen
Using calc can be accomplised pretty easily using the unquote feature:
使用 unquote 功能可以很容易地使用 calc ：
$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);
}
回答by Ben Kalsky
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.
我认为这是更优雅的方式。
