Feature Enabled Mixins for Sass

It’s not uncommon to have some CSS that is for certain browser capabilities (JavaScript, animation, etc). By combining a feature detect solution like Modernizr (which sets classes on the html element) with some basic Sass mixins we can make the SCSS more readable.

Here is a (contrived) example.

See the Pen OPGWdr by Matt Vanderpol (@bookwyrm) on CodePen.

The pertinent mixins are here.

[gist id=”69944ffbfb0f13285065″ file=”feature-helpers.scss”]

The mixins are named based on BEM and they provide good readability in the SCSS for the intent.

I use the @at-root directive from Sass 3.3 to make it easier to keep the existing selector structure when referencing a class on the html element.

This same concept can be extended to any feature detect where classes are put on the html element.