css - -webkit-mask-image 在 sass 中不起作用

Question

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

我-webkit-mask-image在我的 sass 文件中添加了这样的内容：

-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 技术？

编辑：我找到了解决方案。我应该将 value 描述为一个字符串，然后在-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};
}