CSS3 Filter Effects Sass Mixin

_filter.sass

// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html 
//
// grayscale      ex: filter: grayscale(100%);
// sepia          ex: filter: sepia(100%);
// saturate       ex: filter: saturate(0%);
// hue-rotate     ex: filter: hue-rotate(45deg);
// invert         ex: filter: invert(100%);
// brightness     ex: filter: brightness(15%);
// contrast       ex: filter: contrast(200%);
// blur           ex: filter: blur(2px);

=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})')

_filter.scss

// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html 
//
// grayscale      ex: filter: grayscale(100%);
// sepia          ex: filter: sepia(100%);
// saturate       ex: filter: saturate(0%);
// hue-rotate     ex: filter: hue-rotate(45deg);
// invert         ex: filter: invert(100%);
// brightness     ex: filter: brightness(15%);
// contrast       ex: filter: contrast(200%);
// blur           ex: filter: blur(2px);

@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})');
}

output.css

img {
  -webkit-filter: grayscale(100%);
  -moz-filter: greyacale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%); }

usage-sass.sass

img 
  +filter(grayscale,100%)

usage-scss.scss

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

Nice 👍

Hi, good tip and very usable. Tested in most recent firefox and chrome, works great. Tested in IE11 (Edge engine and below) not working. Do you have any tips or is the -ms / filter known for not working in IE?
Thanks a lot

Thanks so much, It speeds up working.

The SCSS version can not be used in Chrome. but the following code works:

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

great! thank you!

👍

I like this a lot...

Many thanks!

Any chance to have it work with multiple filters at once? like

filter: grayscale(100%) blur(5px)

Thanks :)