CSS Grayscale Filter Not Being Included

sage
,
1

I’ve included filter: grayscale(1) (and tried filter: grayscale(100%)) in my stylesheet, but it’s not getting compiled to the final css file (under gulp watch). I’m pretty sure it’s supported by Chrome as I tried manually adding it inside web inspector and it works.

2

BTW, there’s no errors in the Terminal. Also, I tried adding blur filter, and that got compiled. So, why not grayscale? Could it be a Sass or CSSnano thing?

3

Looks like it might be a Sass issue.

I used a mixin instead, which worked. Note: the vendor prefixes will have to be added as autoprefixer won’t touch it.

@mixin filter($filter-type,$filter-amount) {
  -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
  -moz-filter: $filter-type+unquote('(#{$filter-amount})');
  -ms-filter: $filter-type+unquote('(#{$filter-amount})');
  -o-filter: $filter-type+unquote('(#{$filter-amount})');
  filter: $filter-type+unquote('(#{$filter-amount})');
}

img {
@include filter(grayscale, 100%);
}
1 Like
4