CSS3 Filter Effects Sass Mixin #scss #filter #css

_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%);
}