Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy. By including directional.scss into your project and using its Sass variables, functions, and mixins, you can create an LTR and RTL CSS bundle for your site.
- Author: Tyson Matanich - http://matanich.com
- License: MIT
Article: http://www.matanich.com/2013/09/06/rtl-css-with-sass/
Demos:
$dir- defaults to ltr but can be set to rtl$left- set to left when$direquals ltr and right when$direquals rtl$right- set to right when$direquals ltr and left when$direquals rtl
if-ltr($if)- returns$ifparam when$direquals ltr otherwise returns nothingif-ltr($if, $else)- returns$ifparam when$direquals ltr otherwise returns$elseparamif-rtl($if)- returns$ifparam when$direquals rtl otherwise returns nothingif-rtl($if, $else)- returns$ifparam when$direquals rtl otherwise returns$elseparamside-values($values)- switches the left and right values of the$valueslist when$direquals rtlcorner-values($values)- switches the left and right values of the$valueslist when$direquals rtl
@include if-ltr { /*content*/ }- returns the@contentwhen$direquals ltr otherwise returns nothing@include if-rtl { /*content*/ }- returns the@contentwhen$direquals rtl otherwise returns nothing
// Import helpers from directional.scss
@import "directional";
// Use the helpers enable creating CSS bundles for LTR and RTL
body {
text-align: $left;
}
p {
padding-#{$right}: 1em;
margin: side-values(0 2em 0 1em) if-ltr(!important);
background-image: url(sprite#{if-rtl('-rtl')}.png);
&:before {
content: if-ltr('<', '>');
}
&:after {
content: if-rtl('>', '<');
}
@include if-ltr {
strong {
padding-left: 0.5em;
}
}
@include if-rtl {
em {
margin-right: 0.5em;
}
}
}
.icon.icon-star {
background-image: url(sprite-#{$dir}.png);
}To bring it all together your project should look something like the following:
site-ltr.scss
@import 'site.scss';site-rtl.scss (overrides $dir)
$dir: rtl;
@import 'site.scss';site.scss
@import 'directional.scss';
// Your site styles here using directional-scss variables, functions, and mixinsThen reference the appropriate bundle (site-ltr.css or site-rtl.css) needed for the current page:
<!DOCTYPE html>
<html>
<head>
<link href="/site-ltr.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>