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

Answer 2

The following SCSS import adds some useful variables, functions, and mixins.

View on GitHub

Read more

// Override default value for $dir in directional.scss
$dir: rtl;

// Import helpers from directional.scss
@import "directional";

// Use the helpers to make CSS for LTR or RTL
body {
    text-align: $left;
    padding-#{$right}: 1em;
    margin: dir-values(0 2em 0 1em) if-ltr(!important);
}

Answer 3

I would suggest to use a single mixin which can easily handle both cases incl. nested selectors:

_mixin.sass:

$isRLT: true;

@mixin rtl {
  @if $isRLT {
    @if & {
      & {
        @content;
      }
    }
    @else {
      @content;
    }
  }
}

_main.sass:

.test {
  float: left;
  padding: 5px 5px 0px;

  @include rtl {
    padding: 5px 0px 0px 5px;
  }
}

core.scss

// include all your libraries
@import '_mixin';
@import '_main';

This will generate the file without rtl.

For further information check => https://github.com/davidecantoni/sass-rtl-mixin