Sassyfilters NPM

SassyFilters

Cross-Browser configurable CSS-SVG filters.

Online preview (test folder).

API

Filters

Mixins signatures try to follow the specification closely.

blur($radius)
brightness($value)
contrast($value)
drop-shadow($offset-x, $offset-y, $blur-radius, $color [, $spread-radius])
grayscale($value)
hue-rotate($angle)
invert($value)
opacity($value)
saturate($value)
sepia($value)

Example:

.blurred {
  @include blur(5px);
}

Combined filters

filters($filters)

Example:

.combined {
  @include filters((
    brightness: 3,
    invert: 1,
    blur: 5px
  ));
}

SVG filter helper

svg-filter($svgStr, $fragment [, $encoding])

Example:

.custom {
  $svgStr: '<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="custom">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
      <feComponentTransfer>
        <feFuncA tableValues="0 .7" type="table"></feFuncA>
      </feComponentTransfer>
    </filter>
  </svg>';

  @include svg-filter($svgStr, "custom");
}

Configuration

// Default settings.
$filters-defaults: (
  data-type: "raw",  // Encoding of the SVG filters as data URI: raw | escaped | base64
  ie-support: true   // Whether to add IE proprietary filters or not
);

Override default values in a new $filters-settings map.

Browser support

Work in progress...

CSS Filter Effects
Chrome 18.0+ Safari 6.0+ Opera 15.0+

SVG effects for HTML
Firefox 3.5+

Microsoft Extensions to CSS
filter IE 6, 7, 8
-ms-filter IE 8, 9

Requirements

Sass ~> 3.3.0

Install

Git

git clone git@github.com:pascalduez/SassyFilters.git

npm

npm install sassyfilters --save

Usage

Provided that path = path to SassyFilters

Example usage with vanilla Sass

@import 'SassyFilters';

bundle exec sass --watch --load-path [path]/dist --require [path]/lib/helpers.rb input:output

Example usage with grunt-contrib-sass

sass: {
  options: {
    bundleExec: true, // Optional usage of Bundler, but recommended.
    require: ['[path]/lib/helpers.rb'],
    loadPath: ['[path]/dist/_SassyFilters.scss']
  }
}