-webkit-mask-image is not working in sass

Question

I'm using Gulp (node-sass) for compiling sass files to css.

I've added -webkit-mask-image in my sass files like this:

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

but gulp compile it like this:

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

what am I doing wrong? is any way to add experimental css technologies in gulp(node-sass)?

Edit: I found the solution. I should describe value as a string and then set in -webkit-mask-image.

Answer 1

I should describe value as a string and then set in -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};
}