Question

我厌倦了每次使用时为calc函数编写所有供应商前缀：

width: calc(100px - 50px);
width: -o-calc(100px - 50px);
width: -moz-calc(100px - 50px);
width: -webkit-calc(100px - 50px);

我通常做的是在mixin中创建sass，它集成了供应商前缀（该示例适用于box-shadow）：

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

有没有办法为calc函数编写类似的函数？（我没设法做到）

Answer 1

这可能不是您问题的直接答案，而是建议您不再需要为calc添加供应商前缀。就IE而言，不存在供应商前缀的问题。

关于其他浏览器，calc现已得到很好的支持。如需进一步参考，您可以查看CanIUse

Firefox支持版本4中的calc（当前版本为57）
Chrome支持版本19中的calc（当前版本为62）
Opera支持版本15中的calc（当前版本为48）

Internet Explorer版本9也支持它。所以我认为您不需要使用供应商前缀，因为它在这里完全无关。

解决方案

我想出了这个

$props: ("width": "100px - 50px", "height": "100px - 20px");

@mixin calc($props) {
  $vendor-prefixes: ("moz", "o", "webkit");

  @each $prop, $i in $props {
    @each $prefix in $vendor-prefixes {
      #{$prop}: -#{$prefix}-calc(#{$i});
    }

    #{$prop}: calc(#{$i});
  } 
}

body {
  @include calc($props);
}

您可以在SassMeister

试用我的解决方案

这里，正在做的是使用SASS列表功能，它就像一个关联数组。您构建属性的数组并将其提供给mixin，它也将生成相同的供应商前缀版本。

请注意，我在循环结束时放置了非前缀版本，因为建议在前缀版本之后放置非前缀版本。

有关SASS List

的更多信息

Answer 2

以下内容是从用于声明式的更大项目中提取的，而不是css属性或值的 automatic vendor prefixes。

@mixin calc($property, $value, $fallback: false) {
  @if $fallback {
    #{$property}: #{$fallback};
  } @else {
    @warn "Consider setting a fallback for #{$property}";
  }
  @include render-vendor-prefixes(
    $property: $property,
    $value: calc(#{$value}),
    $vendor-list: (
      -webkit, // Old - Chrome 19-25, Safari 6
      -moz     // Old - Firefox 4-15
    ),
    $prefix: value,
  );
}

请注意，以上内容取决于可以在存储库的lib目录中找到的另外两个scss文件。

示例用法

@import '_scss/modules/vendor-prefixes/lib/map-vendor-prefixes.scss';
@import '_scss/modules/vendor-prefixes/lib/render-vendor-prefixes.scss';

@import '_scss/modules/vendor-prefixes/calc.scss';



.something {
  @include calc(
    $property: width,
    $value: 100% - 40px,
    $fallback: 85%
  );
}

请注意，可以将上述@include压缩为一行，并进行扩展以方便阅读。

示例输出...

.something {
  width: 85%;
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
}

尽管calc()中css的浏览器支持得到了更好的改进，但仍然存在一些不支持的浏览器，因此上面的内容展示了如何设置后备 {{1 }} property缩小value

Scss如何集成calc函数的供应商前缀

2 个答案:

解决方案