Noisy Pterodactyl Melodies
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    less-plugin-rtlpublic

    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.

    install

    npm i less-plugin-rtl

    Downloadsweekly downloads

    14

    version

    1.0.0

    license

    none

    homepage

    lesscss.org

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar