https://github.com/less/less-plugin-rtl

auto converts stylesheets from LTR to RTL
https://github.com/less/less-plugin-rtl

less-plugin

Last synced: about 6 hours ago
JSON representation

auto converts stylesheets from LTR to RTL

• Host: GitHub
• URL: https://github.com/less/less-plugin-rtl
• Owner: less
• License: apache-2.0
• Created: 2015-02-12T15:51:19.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-09-25T06:30:35.000Z (almost 1 year ago)
• Last Synced: 2024-05-23T06:02:24.807Z (4 months ago)
• Topics: less-plugin
• Language: JavaScript
• Size: 23.4 KB
• Stars: 12
• Watchers: 9
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![NPM version](https://badge.fury.io/js/less-plugin-rtl.svg)](http://badge.fury.io/js/less-plugin-rtl) [![Dependencies](https://david-dm.org/less/less-plugin-rtl.svg)](https://david-dm.org/less/less-plugin-rtl) [![devDependency Status](https://david-dm.org/less/less-plugin-rtl/dev-status.svg)](https://david-dm.org/less/less-plugin-rtl#info=devDependencies) [![optionalDependency Status](https://david-dm.org/less/less-plugin-rtl/optional-status.svg)](https://david-dm.org/less/less-plugin-rtl#info=optionalDependencies)

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.