Sass mixins and functions to help creating bi-directional stylesheets.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE.md
README.md
_direction.scss
bower.json
package.json
sache.json

README.md

Direction

Sass mixins and functions to help creating bi-directional stylesheets.

Compatibility: Sass and LibSass


Install

Download _direction.scss or install with npm or Bower :

npm

npm install sass-direction

Bower

bower install sass-direction

Usage

app.scss

@import "direction";

h1 {
  text-align: direction(left);
  margin-#{direction(right)}: 1em;
  padding: direction-sides(1em 2em 3em 4em);
  border: direction-corners(1em 2em 3em 4em);
  font-size: direction-if(ltr, 1em, 2em);
  line-height: direction-if(rtl, 2);

  @include direction-if(ltr) {
    &::before {
      content: "left to right";
    }
  }

  @include direction-if(rtl) {
    &::after {
      content: "right to left";
    }
  }

  direction: direction(rtl);

  & > span {
    direction: direction(ltr);
  }
}

app-rtl.scss

$direction: rtl;
@import "app";

Result

app.css

h1 {
  text-align: left;
  margin-right: 1em;
  padding: 1em 2em 3em 4em;
  border: 1em 2em 3em 4em;
  font-size: 1em;
  direction: rtl;
}
h1::before {
  content: "left to right";
}
h1 > span {
  direction: ltr;
}

app-rtl.css

h1 {
  text-align: right;
  margin-left: 1em;
  padding: 1em 4em 3em 2em;
  border: 2em 1em 4em 3em;
  font-size: 2em;
  line-height: 2;
  direction: ltr;
}
h1::after {
  content: "right to left";
}
h1 > span {
  direction: rtl;
}

Aliases

  • Function direction-ltr($if, $else): direction-if(ltr, $if, $else)
  • Function direction-rtl($if, $else): direction-if(rtl, $if, $else)
  • Mixin direction-ltr: direction-if(ltr)
  • Mixin direction-rtl: direction-if(rtl)

Credits

Hugely based on Tyson Matanich’s idea.