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

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