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.