-webkit-mask-image 在 sass 中不工作

Question

我正在使用 Gulp (node-sass) 将 sass 文件编译为 css。

我在我的 sass 文件中添加了 -webkit-mask-image，如下所示：

-webkit-mask-image: -webkit-gradient(linear, left bottom, left 30%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

但是 gulp 像这样编译它：

mask-image: -webkit-gradient(linear, left bottom, left 30%, left, right);

我做错了什么？有什么方法可以在 gulp(node-sass) 中添加实验性 css 技术？

编辑：我找到了解决方案。我应该将值描述为字符串，然后在 -webkit-mask-image.

中设置

Answer 1

我应该将值描述为字符串，然后在-webkit-mask-image中设置。

$gradientSidebar: "-webkit-gradient(linear, left bottom, left 30%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))";
.my-class{
   -webkit-mask-image: #{$mobileGradientSidebar};
}