Skip to content
An approach to write a css code for once and create two version of it RTL or LTR just with change one variable value
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
sass
stylesheets
.gitignore
LICENSE
README.md
bower.json

README.md

Sass Direction Controller

An approach to write a css code for once and create two version of it RTL or LTR just with change one variable value


Installation

  • _direction-controller.scss: It's main file to handle directions and have to import after $text-direction variable.

Document

Direction Controller Settings

  • $text-direction: Main variable to change css output for RTL / LTR websites. Default value is ltr
  • Direction Controller base is for LTR languages. If you want change default coding Sass structure for RTL languages, change default value of these variables:
    • $default-float: Default value is left
    • $opposite-direction: Default value is right

Useful Variable

  • $text-direction: Main variable to choose direction. Default value is ltr
  • $start: If $text-direction value equal ltr, $start value is left
  • $end: If $text-direction value equal ltr, $end value is right

Useful Functions

  • dir-check($a, $b): This function check if direction equal ltr return first parametr, else return secound parameter
  • dir-values($values): Reorder right and left positions in padding/margin values list
  • br-values($values): Reorder right and left positions in border-radius values list

Useful Mixins

  • if-ltr() { @content }: This Mixin check your direction and if your direction was ltr load content of this mixin.
  • if-rtl() { @content }: This Mixin check your direction and if your direction was rtl load content of this mixin.

More Info

Read details on this article(Persian): http://parhum.net/blog/ui/sass-direction-controller/

Changelog

1.0.2

  • Add main file to bower.json.

1.0.1

  • Add bower.json and register it to bower library.

1.0.0

  • Add $default-float & $opposite-direction variables to can change base Sass structure for LTR / RTL. Default structure is for LTR languages

0.2.0

  • Change $left & $right variable names to $start & $end

0.1.0

  • initial release
You can’t perform that action at this time.