_**Update** - The CSS Flipper now lives in a separate module and won't be included in Sasson v3.x - this means practically any theme can be flipped in no-time (use the spare time to contribute it back to the community :) )._

Long story short, Sasson can RTL itself with a single line of code.

Long time ago, when we wanted to add bi-directionality to our site for RTL (Right-To-Left) languages like Arabic or Hebrew we had to use tools like CSSJanus or RTLer to flip our CSS and then paste the result into style-rtl.css and fix whatever needed fixing.
This workflow have several drawbacks:

* It isn't fun.
* It is a maintenance burden - you must manually update your style-rtl.css with every change to style.css
* Those auto RTL tools will never handle sass/scss files.
* After auto-RTLing, your RTL css isn't ready yet, you usually still need to adjust it (e.g. remove the not RTLed lines)
* Many auto-RTLers can't handle media queries.

Sasson takes care of all this, and with a single line of code.
This is what you do:

* Put all your styles into style.**s**css (plain css is so 2010)
* Create style-rtl.scss next to style.scss
* Put this line in style-rtl.scss @flip {file: "style.scss"};
* Check your site and add any fixes after this line (e.g. use different background-images).

### Some examples
What Sasson does is take this @flip line and replace it with a flipped version of the named style sheet, that means that -
#logo {  float: left;}
in the CSS output becomes -
#logo {  float: right;}
But this is just the beginning, what most auto-RTLers fail to do is remove unRTLed lines, in drupal we put only the overrides in our style-rtl.css file since both style.css and style-rtl.css are called on RTL pages, but with sasson -
.class {  padding: 1px 2px 3px 4px;  margin-right: 3em;  background: url(image.gif) no-repeat right center;  margin-bottom: 20px;  color: #222;}
Will become -
.class {  padding: 1px 4px 3px 2px;  margin-left: 3em;  margin-right: auto;  background: url(image.gif) no-repeat left center;}
Notice how Sasson adds the margin-right: auto; to reset the right margin, and how it removes the lines that don't have any directionality overrides in them (e.g. the color property) thus keeping the CSS output as light as possible.
Keep in mind that since this file is being recompiled when needed, every change to style.scss will be automagically imported and flipped in style-rtl.scss !

###Bottom line
Sasson can turn THIS into THIS and all you have to do is THIS.

And that's not all...
### With Sasson you can go the other way around too !
Drupal allows you to have your RTL overrides in style-rtl.css but what if you develop an RTL site and only want to put some overrides for a small english (LTR) section ?
With Sasson you can go both ways, that means you can have your default styles in style.css (they can be either RTL or LTR) and put your LTR overrides inside style-ltr.css, this file will be called on LTR pages only.
So basically you can have style.css that loads on every page, style-rtl.css that loads on RTL pages only and style-ltr.css that will be called only for LTR pages.

#content ul {margin-bottom: 20px;}