如何在SCSS中编写Mixin实现CSS图片灰度滤镜的浏览器兼容？-css教程-PHP中文网

ios safari 9–12 仅支持 -webkit-filter: grayscale(1)，不识别标准 filter: grayscale(100%)，需并列声明且前缀在前；数值须为无单位浮点数（如 1），scss 中需用插值 #{$value} 并确保类型正确。

如何在scss中编写mixin实现css图片灰度滤镜的浏览器兼容？

为什么直接写 `filter: grayscale(100%)` 在 iOS Safari 9–12 里不生效

不是语法错，也不是漏单位——这些版本的 WebKit 只认 -webkit-filter，且不会 fallback 到标准属性。你写 filter: grayscale(100%)，iOS Safari 10 会直接忽略；必须并列声明，且顺序不能颠倒：-webkit-filter: grayscale(1) 放前，filter: grayscale(100%) 放后。注意数值单位差异：grayscale(1) 是无单位浮点数，grayscale(100%) 是百分比，两者语义等价但旧 Safari 只接受前者。

`@mixin grayscale()` 必须手动拼接前缀和插值，不能透传字符串

SCSS Mixin 无法安全地把一整串滤镜函数（比如 "grayscale(50%) contrast(1.2)"）当参数传入，因为不同浏览器对空格、括号、顺序解析不一致，尤其在 X5 内核或旧 WebKit 中极易崩溃。正确做法是把每个参数拆开，在 Mixin 内部用插值拼接：

@mixin grayscale($value: 100%) {
  -webkit-filter: grayscale(#{$value});
  filter: grayscale(#{$value});
}

关键点：

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

#{$value} 必须带插值符号，否则 SCSS 编译报错
$value 类型要是带单位的数值（如 50% 或 0.5），不能传字符串 "50%"，否则生成 CSS 时多出引号导致失效
若需组合多个滤镜（如灰度 + 亮度），得显式拆解：-webkit-filter: grayscale(#{$g}) brightness(#{$b}); filter: grayscale(#{$g}) brightness(#{$b});

IE 和 Edge 12–15 完全不支持 `filter`，降级方案不能只靠 CSS

这些浏览器连 -webkit-filter 都不识别，@supports (filter: grayscale(0)) 检测也不可靠——旧 Safari 9 会误报支持。JS 检测更准：window.CSS && CSS.supports('filter', 'grayscale(0)')。但实际项目中，更务实的做法是：