Package Exports

sass-direction

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sass-direction) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.