1 - Download

First, go on Github, and download the accecss.scss file along with the filter.svg

2 - @import

Now, you have to import the mixin into your main stylesheet.

To keep things clear, I recommand using a main.scss file, and import both your styles and accecss mixin into it

@import ' style.scss '; @import ' accecss.scss ';

3 - Use it

Once 1 & 2 are done, you're ready to use the mixin, here is how looks an inactive Accecss mixin, note that by default, all the settings are set to false

@include accecss( $element: false , $zones: false , $grayscale: false , $cbFilter: false ) ;

Let's say you want to debug your whole document, and, for example, let's say you want to get your elements outlined

@include accecss( $element: 'html body' , $zones: true , $grayscale: false , $cbFilter: false ) ;

To add a grayscaled effect :

@include accecss( $element: 'html body' , $zones: false , $grayscale: true , $cbFilter: false ) ;

And finally, add a blindness color filter :

@include accecss( $element: 'html body' , $zones: false , $grayscale: false , $cbFilter: protanopia ) ;