如何创建一个calc mixin作为表达式传递以生成标签？ [英] How can I create a calc mixin to pass as an expression to generate tags?

问题描述

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

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

解决方案

基本混合参数，幸运的是，表达式不是支持范围内的浏览器特定的：

  @mixin calc（$ property，$ expression）{
＃{$ property}： -webkit-calc（＃{$ expression}）; 
＃{$ property}：calc（＃{$ expression}）; 
} 
 
 .test {
 @include calc（width，25％ -  1em）; 
} 
  

将呈现为

< pre class =lang-html prettyprint-override> .test {
width：-webkit-calc（25％ - 1em）;
width：calc（25％ - 1em）;
}


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

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().

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?

解决方案

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 mixin作为表达式传递以生成标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！