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

License

Notifications You must be signed in to change notification settings

parhumm/sass-direction-controller

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages