Fork me on GitHub


The Photo Filter SCSS Mixin Library


Preset Filters

Simple Usage

Preset Filters now ues Sass' @extend feature with %placeholders


<div> <img src="img/example.jpg"/> </div>


@import "compass"; @import "sassmatic.scss"; div { @extend %filter-sanfran; }

Custom Filters

Below is the setup up for the "custom" filter in the demo at the top


@import "compass"; @import "sassmatic.scss"; div { @include filter-custom(sepia(100%)); // REQUIRED but doesn't have to have a value @include filter-color(#ffb400, 0.5);// Filter color and opacity @include filter-vignette(white, 70%, 90%, 3rem); // Color, start, stop and inset boxshadow }