Makes supporting CSS for left-to-right (LTR) and right-to-left (RTL) easy with SASS.
CSS
Latest commit cfbdb5a Aug 22, 2016 @tysonmatanich committed on GitHub Merge pull request #2 from applecool/master
Fixed error - dir-values to side-values function
Permalink
Failed to load latest commit information.
.gitattributes initial Sep 6, 2013
.gitignore initial Sep 6, 2013
README.md Update README.md Jun 25, 2014
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.

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

// Override default value for $dir in directional.scss
$dir: rtl;

// Import helpers from directional.scss
@import "directional";

// Use the helpers to make CSS for LTR or 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);
}