Handle Document Direction with a Handy Sass Mixin

Accounting for document direction can be frustrating. So, with the inspiration of my coworkers, I attempted to implement my own sass mixin to handle rtl formatting.

While some of the CSS spec greatly accounts for document direction (flexbox, for example), much of it (mostly the older bits) doesn’t.

This mixin searches a given property/value pair’s text for “left” or “right” and inverts them to “right” and “left”, respectively. For values, the mixin checks that it’s a string first. If not, the value is skipped and default is returned.

The utility utilizes Hugo Giraudel’s str-replace function, which is essentially the same as JavaScript’s String.replace().

All that said, here’s the mixin:

Using it is simple:

The output:

Thanks for reading!

George is a front-end developer and digital designer living in Oakland, California. He is currently between jobs, about to start at ServiceNow on their Design Systems team. Other times, he can be found long boarding, playing video games, or collecting way too many Pokemon cards.

Learning to see. @gwtrev