CODEWITHSUNDEEP
csssassgulpnode-sassimage-masking
Emad Emami
Emad Emami

Reputation: 6639

-webkit-mask-image is not working in sass

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)?

Upvotes: 0

Views: 640

Answers (1)

Emad Emami
Emad Emami

Reputation: 6639

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

Upvotes: 0

Related Questions