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 列表功能，它就像一个关联数组。您构建属性数组并将其提供给mixin，它也将生成相同的供应商前缀版本。

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

有关 SASS 列表的更多信息

Answer 2

以下内容来自一个更大的项目，用于声明性而不是css属性或值的自动供应商前缀...

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

虽然浏览器支持在csscalc()中变得更好，但仍有一些不支持它，因此上面显示了如何在@mixin中设置回退propertyvalue