less-plugin-rtl

   

less-plugin-rtl
===============

Reverses less from ltr to rtl

``less
.reverse {
float: left;
margin-left: 5px;
margin: 1px 2px 3px 4px;
& when (@rtl) {
color: green;
}
}
`

Becomes...

`css
.reverse {
float: right;
margin-right: 5px;
margin: 1px 4px 3px 2px;
color: green;
}
`

To use with lessc

`bash
$ npm install -g less-plugin-rtl
$ lessc --rtl file.less out.css
`

Variables
=========

Three variables are injected ltr and rtl which will be set to true or false and dir which will be set to rtl or ltr.

Property Reversing
==================

To be more in control of properties that get reversed, you can specify property directives

`
.test {
-ltr-padding: 0; // rule only appears in LTR
-rtl-margin: 3px; // rule only appears in RTL
-ltr-rtl-float: left; // rule does not get reversed in either direction if autoReverse is on
-rtl-ltr-float: left; // rule does not get reversed in either direction if autoReverse is on
-ltr-reverse-text-align: left; // rule gets reversed for LTR, so in this case RTL = left, LTR = right
-rtl-reverse-text-align: left; // rule gets reversed for RTL, so in this case RTL = right, LTR = left
}
`

Note: The reverse rules only make sense if autoreverse is off.

And this produces in RTL..
`
.test {
margin: 3px;
float: left;
float: left;
text-align: left;
text-align: right;
}
`

and in LTR...
`
.test {
padding: 0;
float: left;
float: left;
text-align: right;
text-align: left;
}
`

CLI Options
===========

`bash
$ lessc --rtl="dir=LTR auto-reverse=false vars=false" file.less out.css
`

auto-reverse
------------

Whether rules should be auto reversed or require property directives as above. Defaults to true.

vars
----

Whether the variables should be available. Defaults to true.

dir
---

The intended direction. Defaults to RTL.

Programmatic Options
====================

As above, but use dir, vars and autoReverse` on the options object.