Makes supporting CSS for left-to-right (LTR) and right-to-left (RTL) easy with SASS.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 27cfcad Jan 16, 2018
Permalink
Failed to load latest commit information.
.gitattributes initial Sep 6, 2013
.gitignore initial Sep 6, 2013
README.md Update README.md Jan 16, 2018
directional.scss Update directional.scss Jun 25, 2014
examples.scss Fixed error - dir-values to side-values mixin Aug 21, 2016

README.md

Directional-SCSS

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.

Article: http://www.matanich.com/2013/09/06/rtl-css-with-sass/

Demos:

Features

Variables

  • $dir - defaults to ltr but can be set to rtl
  • $left - set to left when $dir equals ltr and right when $dir equals rtl
  • $right - set to right when $dir equals ltr and left when $dir equals rtl

Functions

  • if-ltr($if) - returns $if param when $dir equals ltr otherwise returns nothing
  • if-ltr($if, $else) - returns $if param when $dir equals ltr otherwise returns $else param
  • if-rtl($if) - returns $if param when $dir equals rtl otherwise returns nothing
  • if-rtl($if, $else) - returns $if param when $dir equals rtl otherwise returns $else param
  • side-values($values) - switches the left and right values of the $values list when $dir equals rtl
  • corner-values($values) - switches the left and right values of the $values list when $dir equals rtl

Mixins

  • @include if-ltr { /*content*/ } - returns the @content when $dir equals ltr otherwise returns nothing
  • @include if-rtl { /*content*/ } - returns the @content when $dir equals rtl otherwise returns nothing

Example

// 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 mixins

Then 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>