Skip to content

less/less-plugin-rtl

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 

NPM version Dependencies devDependency Status optionalDependency Status

less-plugin-rtl

Reverses less from ltr to rtl

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

Becomes...

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

To use with lessc

$ 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

$ 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.

About

auto converts stylesheets from LTR to RTL

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published