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 :

$3

``
npm install sass-direction
`

$3

`
bower install sass-direction
`

---

Usage

$3

`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);
}
}
`

$3

`scss
$direction: rtl;
@import "app";
`

---

Result

$3

`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;
}

`

$3

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