RTL Layout Sass/Scss Mixin

mixin.md

RTL Layout Sass/Scss Mixin

We can use that selector to target styles if the HTML element has the dir attribute defined.

@mixin rtl {
    [dir="rtl"] & {
        @content;
    }
}

.Component {
    // ltr styles
    float: left;
    margin-right: 1rem;

    // rtl styles
    // change directions and reverse the margin
    @include rtl {
        float: right;
        margin-right: auto;
        margin-left: 1rem;
     }
}