├── img ├── ltr │ └── bg.jpg └── rtl │ └── bg.jpg ├── bower.json ├── sass ├── output-ltr.scss ├── output-rtl.scss ├── _sample-usage.scss └── _direction-controller.scss ├── .gitignore ├── stylesheets ├── output-ltr.css └── output-rtl.css ├── LICENSE └── README.md /img/ltr/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parhumm/sass-direction-controller/HEAD/img/ltr/bg.jpg -------------------------------------------------------------------------------- /img/rtl/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parhumm/sass-direction-controller/HEAD/img/rtl/bg.jpg -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass-direction-controller", 3 | "version": "1.0.2", 4 | "main": "sass/_direction-controller.scss", 5 | "ignore": [ 6 | ], 7 | "private": false 8 | } -------------------------------------------------------------------------------- /sass/output-ltr.scss: -------------------------------------------------------------------------------- 1 | // Defaine direction 2 | $text-direction: ltr; 3 | 4 | // Import Direction Controller 5 | @import "direction-controller"; 6 | 7 | // Import your styles 8 | @import "sample-usage"; -------------------------------------------------------------------------------- /sass/output-rtl.scss: -------------------------------------------------------------------------------- 1 | // Defaine direction 2 | $text-direction: rtl; 3 | 4 | // Import Direction Controller 5 | @import "direction-controller"; 6 | 7 | // Import your styles 8 | @import "sample-usage"; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | # Windows image file caches 3 | Thumbs.db 4 | ehthumbs.db 5 | 6 | # Folder config file 7 | Desktop.ini 8 | 9 | # Recycle Bin used on file shares 10 | $RECYCLE.BIN/ 11 | 12 | # Windows Installer files 13 | *.cab 14 | *.msi 15 | *.msm 16 | *.msp 17 | 18 | .DS_Store 19 | .AppleDouble 20 | .LSOverride 21 | 22 | # Icon must end with two \r 23 | Icon 24 | 25 | 26 | # Thumbnails 27 | ._* 28 | 29 | # Files that might appear on external disk 30 | .Spotlight-V100 31 | .Trashes 32 | 33 | # Directories potentially created on remote AFP share 34 | .AppleDB 35 | .AppleDesktop 36 | Network Trash Folder 37 | Temporary Items 38 | .apdisk 39 | .sass-cache -------------------------------------------------------------------------------- /stylesheets/output-ltr.css: -------------------------------------------------------------------------------- 1 | /* line 1, ../sass/_sample-usage.scss */ 2 | body { 3 | direction: ltr; 4 | text-align: left; 5 | background-image: url(../img/ltr/bg.png); 6 | background-position: left top; 7 | line-height: 18px; 8 | } 9 | 10 | /* line 20, ../sass/_sample-usage.scss */ 11 | #container { 12 | float: left; 13 | line-height: 52px; 14 | padding: 1px 2px 3px 0; 15 | } 16 | 17 | /* line 26, ../sass/_sample-usage.scss */ 18 | #sidebar { 19 | float: right; 20 | margin-left: 50px; 21 | } 22 | 23 | /* line 30, ../sass/_sample-usage.scss */ 24 | .next { 25 | content: ">"; 26 | } 27 | 28 | /* line 33, ../sass/_sample-usage.scss */ 29 | .br { 30 | border-radius: 0 0 25px 0; 31 | } 32 | -------------------------------------------------------------------------------- /sass/_sample-usage.scss: -------------------------------------------------------------------------------- 1 | body { 2 | direction: $text-direction; 3 | text-align: $start; 4 | 5 | // For different image in your code, you can use this solution. Use 6 | background-image: url(../img/#{$text-direction}/bg.png); 7 | background-position: $start top; 8 | 9 | @include if-ltr { 10 | line-height: 18px; 11 | } 12 | @include if-rtl { 13 | line-height: 22px; 14 | h1 { 15 | line-height: 25px; 16 | } 17 | } 18 | } 19 | 20 | #container { 21 | float: $start; 22 | line-height: dir-check(52px, 30px); 23 | padding: dir-values(1px 2px 3px 0); 24 | } 25 | 26 | #sidebar { 27 | float: $end; 28 | margin-#{$start}: 50px; 29 | } 30 | .next { 31 | content: dir-check('>', '<'); 32 | } 33 | .br { 34 | border-radius: br-values(0 0 25px 0); 35 | } -------------------------------------------------------------------------------- /stylesheets/output-rtl.css: -------------------------------------------------------------------------------- 1 | /* line 1, ../sass/_sample-usage.scss */ 2 | body { 3 | direction: rtl; 4 | text-align: right; 5 | background-image: url(../img/rtl/bg.png); 6 | background-position: right top; 7 | line-height: 22px; 8 | } 9 | /* line 14, ../sass/_sample-usage.scss */ 10 | body h1 { 11 | line-height: 25px; 12 | } 13 | 14 | /* line 20, ../sass/_sample-usage.scss */ 15 | #container { 16 | float: right; 17 | line-height: 30px; 18 | padding: 1px 0 3px 2px; 19 | } 20 | 21 | /* line 26, ../sass/_sample-usage.scss */ 22 | #sidebar { 23 | float: left; 24 | margin-right: 50px; 25 | } 26 | 27 | /* line 30, ../sass/_sample-usage.scss */ 28 | .next { 29 | content: "<"; 30 | } 31 | 32 | /* line 33, ../sass/_sample-usage.scss */ 33 | .br { 34 | border-radius: 0 0 0 25px; 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Parham Khoshbakht 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /sass/_direction-controller.scss: -------------------------------------------------------------------------------- 1 | // Name: Direction Controller Functions 2 | // URI: https://github.com/parhumm/Sass-Direction-Controller/ 3 | // Description: An approach to write a css code for once and create tow version of it RTL or LTR just with change one variable value 4 | // Version: 1.0.2 5 | // Author: Parhum Khoshbakht 6 | // Author URI: https://github.com/parhumm 7 | // License: The MIT License (MIT) 8 | // License URI: https://github.com/parhumm/Sass-Direction-Controller/blob/master/LICENSE 9 | 10 | 11 | // Choose Your Site Language Direction: LTR or RTL. 12 | // Default is LTR 13 | $text-direction: ltr !default; 14 | 15 | // Write your base sass for RTL or LTR. 16 | // Default is for LTR 17 | $default-float: left !default; 18 | $opposite-direction: right !default; 19 | 20 | $start: $default-float; 21 | $end: $opposite-direction; 22 | 23 | // Mixin and Functions 24 | @if $text-direction != ltr { 25 | $start: $opposite-direction; 26 | $end: $default-float; 27 | } 28 | 29 | // dir-check function check if direction equal ltr return first parametr, else return secound parameter 30 | @function dir-check($a, $b) { 31 | @if $text-direction == ltr { 32 | @return $a; 33 | } @else { 34 | @return $b; 35 | } 36 | } 37 | 38 | // dir-values Reorder $opposite-direction and $default-float positions in padding/margin values list 39 | @function dir-values($values) { 40 | @if $text-direction == rtl and length($values) == 4 { 41 | @return nth($values, 1) nth($values, 4) nth($values, 3) nth($values, 2); 42 | } 43 | @else { 44 | @return $values; 45 | } 46 | } 47 | 48 | // br-values Reorder $opposite-direction and $default-float positions in border-radius values list 49 | @function br-values($values) { 50 | @if $text-direction == rtl and length($values) == 4 { 51 | @return nth($values, 2) nth($values, 1) nth($values, 4) nth($values, 3); 52 | } 53 | @else { 54 | @return $values; 55 | } 56 | } 57 | 58 | // These Mixins check your direction and display @content 59 | @mixin if-ltr { 60 | @if $text-direction == ltr { 61 | @content; 62 | } 63 | } 64 | 65 | @mixin if-rtl { 66 | @if $text-direction != ltr { 67 | @content; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sass Direction Controller 2 | 3 | An approach to write a css code for once and create two version of it RTL or LTR just with change one variable value 4 | 5 | ----------------------- 6 | 7 | # Installation 8 | 9 | * `_direction-controller.scss`: It's main file to handle directions and have to import after $text-direction variable. 10 | 11 | # Document 12 | 13 | ### Direction Controller Settings 14 | 15 | * `$text-direction`: Main variable to change css output for RTL / LTR websites. Default value is **ltr** 16 | * Direction Controller base is for LTR languages. If you want change default coding Sass structure for RTL languages, change default value of these variables: 17 | * `$default-float`: Default value is **left** 18 | * `$opposite-direction`: Default value is **right** 19 | 20 | ### Useful Variable 21 | 22 | * `$text-direction`: Main variable to choose direction. Default value is ltr 23 | * `$start`: If **$text-direction** value equal **ltr**, `$start` value is **left** 24 | * `$end`: If **$text-direction** value equal **ltr**, `$end` value is **right** 25 | 26 | 27 | ### Useful Functions 28 | 29 | * `dir-check($a, $b)`: This function check if direction equal ltr return first parametr, else return secound parameter 30 | * `dir-values($values)`: Reorder right and left positions in padding/margin values list 31 | * `br-values($values)`: Reorder right and left positions in border-radius values list 32 | 33 | ### Useful Mixins 34 | 35 | * `if-ltr() { @content }`: This Mixin check your direction and if your direction was ltr load content of this mixin. 36 | * `if-rtl() { @content }`: This Mixin check your direction and if your direction was rtl load content of this mixin. 37 | 38 | # More Info 39 | 40 | Read details on this article(Persian): http://parhum.net/blog/ui/sass-direction-controller/ 41 | 42 | # Changelog 43 | 44 | ### 1.0.2 45 | * Add main file to bower.json. 46 | 47 | ### 1.0.1 48 | * Add bower.json and register it to bower library. 49 | 50 | ### 1.0.0 51 | * Add `$default-float` & `$opposite-direction` variables to can change base Sass structure for LTR / RTL. Default structure is for `LTR` languages 52 | 53 | ### 0.2.0 54 | * Change `$left` & `$right` variable names to `$start` & `$end` 55 | 56 | ### 0.1.0 57 | * initial release --------------------------------------------------------------------------------