Dry your rtl and ltr css files in Rails with sass

If you want your site to support both LTR (english) to RTL (hebrew/arabic), you need to duplicate your css files that contain position elements:

/* site.scss: */
#user-box {
	backgroud-color: white;
	padding: 0 5px;
}


/* ltr.css: */
#user-box {
	float: left;
}

#side-nav {
	margin-left: 5px;
}


/* rtl.css: */
#user-box {
	float: right;
}

#side-nav {
	margin-right: 5px;
}

How can we remove the CSS duplication?

Enter SASS

http://sass-lang.com/

Basically, sass is a css preprocessor- it enhance your css with nesting, mixing, and variables.

We can use sass variables to hide the direction styles inside our site css, and then set them in advance in the rtl css files:

/* site.scss: */
$dir: left !default;
$opdir: right !default;

#user-box {
	backgroud-color: white;
	padding: 0 5px;
	float: $dir;
}

#side-nav {
	margin-#{$opdir}: 5px;
}


/* rtl.scss: */
$dir: right;
$opdir: left;
@import site;

Sass RTL with foundation

(updated 9/2012)

If you are using zurb foundation, they support RTL out of the box: foundation-rtl

$textDirection: rtl;
Amit
My name is Amit Kazmirsky I'm a Rails Developer living in SF