css - Scss 如何为 calc 函数集成供应商前缀

Question

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

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

我通常做的是在 sass 中创建一个 mixin，它确实集成了供应商前缀(该示例用于 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 列表功能，它就像一个关联数组。您构建属性数组并将其提供给混入，它也会为相同的对象生成带有供应商前缀的版本。

请注意，我已将非前缀版本放在循环的末尾，因为建议将非前缀版本放在前缀版本之后。

有关 SASS List 的更多信息