right-to-left (RTL) support in SASS project

Question

I'm wondering if it's possible to make a mixin that handles multiple arguments as properties that should be converted to rtl. I want to do something like

.css-selector {
    width: 300px;
    height: 200px;
    @include rtl {
         padding: 10px 5px 3px 4px;
         margin: 3px 8px 2px 5px;
    }
}

with a mixin:

$rtl = false !default;

 @mixin rtl() {
    @if $rtl {
        dir: rtl;
        @each $property in @content {
            //check property if it's padding or margin or something 
              else rtl-related... if hit use rtl mixin
            }
    }
    @else { @content; }

}

I think I should parse the @content, but it doesn't work (Invalid CSS after "...h $property in ": expected expression (e.g. 1px, bold), was "@content {) .

Now I handle rtl with 2 vars:

 $dir: left !default;
 $opdir: right !default;

that i change when it's rtl. I use it in my sass files like

margin-#{$dir}: 15px;

But I don't think this solution is flexible enough. And I also don't want to include a seperate mixin per css property.

Somebody has a better idea or solution? Any feedback welcome

Answer 1

not the same approach, but bi-app-sass will solve the rtl problem, and it will generate a 2 different stylesheets for you

after creating the necessary files (explained in the link above), all you have to do is to call a predefined mixin for left / right properties ( float, border, margin, padding, text-align ... )

 .foo {
   @include float(left);
   @include border-left(1px solid white);
   @include text-align(right);
 }

there are also a port of this project for less language

• bi-app-less

---

Update

in bi-app-sass there are rtl & ltr conditional mixins that is useful to handle special cases, see the following example

.something {
    @include ltr {
        // anything here will appear in the ltr stylesheet only
        background-image: url( 'app-ltr.jpg' );
    }
    @include rtl {
        // for rtl sheet only
        background-image: url( 'app-rtl.jpg' );
        margin-top: -2px;
    }
}

Note that this feature is not supported in bi-app-less