Sass mixins and functions to help creating bi-directional stylesheets.
Compatibility: Sass and LibSass
Download _direction.scss or install with npm or Bower :
npm install sass-direction
bower install sass-direction
@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);
}
}$direction: rtl;
@import "app";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;
}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;
}- 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)
Hugely based on Tyson Matanich’s idea.