├── .gitattributes ├── examples.scss ├── directional.scss ├── README.md └── .gitignore /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /examples.scss: -------------------------------------------------------------------------------- 1 | // Override default value for $dir in directional.scss 2 | $dir: rtl; 3 | 4 | // Import helpers from directional.scss 5 | @import "directional"; 6 | 7 | // Use the helpers to make CSS for LTR or RTL 8 | body { 9 | text-align: $left; 10 | margin-#{$right}: 0; 11 | background-image: url(sample-#{$dir}.png); 12 | padding: side-values(1px 2px 3px 4px); 13 | overflow-x: if-ltr(visible, scroll); 14 | overflow-y: if-rtl(scroll, visible); 15 | font-weight: normal if-ltr(!important); 16 | font-size: 1em if-rtl(!important); 17 | @include if-ltr { 18 | line-height: 1em; 19 | } 20 | @include if-rtl { 21 | p { 22 | line-height: 1.125em; 23 | vertical-align: top; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /directional.scss: -------------------------------------------------------------------------------- 1 | // directional-scss | Author: Tyson Matanich (http://matanich.com), 2013 | License: MIT 2 | $dir: ltr !default; 3 | 4 | // Default $dir if not valid 5 | @if $dir != ltr and $dir != rtl { 6 | $dir: ltr; 7 | } 8 | 9 | @function if-ltr($if, $else: null) { 10 | @if $dir != rtl { 11 | @return $if; 12 | } 13 | @else { 14 | @return $else; 15 | } 16 | } 17 | 18 | @function if-rtl($if, $else: null) { 19 | @return if-ltr($else, $if); 20 | } 21 | 22 | $left: if-ltr(left, right); 23 | $right: if-ltr(right, left); 24 | 25 | @function side-values($values) { 26 | @if $dir == rtl and length($values) >= 4 { 27 | // Reorder right and left positions in list 28 | @return nth($values, 1) nth($values, 4) nth($values, 3) nth($values, 2); 29 | } 30 | @else { 31 | @return $values; 32 | } 33 | } 34 | 35 | @function corner-values($values) { 36 | @if $dir == rtl and length($values) > 1 { 37 | // Reorder right and left positions in list 38 | @if length($values) == 2 { 39 | @return nth($values, 2) nth($values, 1); 40 | } 41 | @else if length($values) == 3 { 42 | @return nth($values, 2) nth($values, 1) nth($values, 2) nth($values, 3); 43 | } 44 | @else { 45 | @return nth($values, 2) nth($values, 1) nth($values, 4) nth($values, 3); 46 | } 47 | } 48 | @else { 49 | @return $values; 50 | } 51 | } 52 | 53 | @mixin if-ltr { 54 | @if $dir != rtl { 55 | @content; 56 | } 57 | } 58 | 59 | @mixin if-rtl { 60 | @if $dir == rtl { 61 | @content; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Directional-SCSS 2 | 3 | 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. 4 | 5 | * Author: Tyson Matanich - http://matanich.com 6 | * License: MIT 7 | 8 | **Article:** http://www.matanich.com/2013/09/06/rtl-css-with-sass/ 9 | 10 | **Demos:** 11 | * RTL - http://codepen.io/tysonmatanich/pen/GnKhA 12 | * LTR - http://codepen.io/tysonmatanich/pen/mCavA 13 | 14 | ## Features 15 | 16 | ### Variables 17 | * `$dir` - defaults to **ltr** but can be set to **rtl** 18 | * `$left` - set to **left** when `$dir` equals **ltr** and **right** when `$dir` equals **rtl** 19 | * `$right` - set to **right** when `$dir` equals **ltr** and **left** when `$dir` equals **rtl** 20 | 21 | ### Functions 22 | * `if-ltr($if)` - returns `$if` param when `$dir` equals **ltr** otherwise returns nothing 23 | * `if-ltr($if, $else)` - returns `$if` param when `$dir` equals **ltr** otherwise returns `$else` param 24 | * `if-rtl($if)` - returns `$if` param when `$dir` equals **rtl** otherwise returns nothing 25 | * `if-rtl($if, $else)` - returns `$if` param when `$dir` equals **rtl** otherwise returns `$else` param 26 | * `side-values($values)` - switches the left and right values of the `$values` list when `$dir` equals **rtl** 27 | * `corner-values($values)` - switches the left and right values of the `$values` list when `$dir` equals **rtl** 28 | 29 | ### Mixins 30 | * `@include if-ltr { /*content*/ }` - returns the `@content` when `$dir` equals **ltr** otherwise returns nothing 31 | * `@include if-rtl { /*content*/ }` - returns the `@content` when `$dir` equals **rtl** otherwise returns nothing 32 | 33 | ## Example 34 | ```scss 35 | // Import helpers from directional.scss 36 | @import "directional"; 37 | 38 | // Use the helpers enable creating CSS bundles for LTR and RTL 39 | body { 40 | text-align: $left; 41 | } 42 | 43 | p { 44 | padding-#{$right}: 1em; 45 | margin: side-values(0 2em 0 1em) if-ltr(!important); 46 | background-image: url(sprite#{if-rtl('-rtl')}.png); 47 | 48 | &:before { 49 | content: if-ltr('<', '>'); 50 | } 51 | 52 | &:after { 53 | content: if-rtl('>', '<'); 54 | } 55 | 56 | @include if-ltr { 57 | strong { 58 | padding-left: 0.5em; 59 | } 60 | } 61 | 62 | @include if-rtl { 63 | em { 64 | margin-right: 0.5em; 65 | } 66 | } 67 | } 68 | 69 | .icon.icon-star { 70 | background-image: url(sprite-#{$dir}.png); 71 | } 72 | ``` 73 | 74 | To bring it all together your project should look something like the following: 75 | 76 | **site-ltr.scss** 77 | ```scss 78 | @import 'site.scss'; 79 | ``` 80 | 81 | **site-rtl.scss** (overrides $dir) 82 | ```scss 83 | $dir: rtl; 84 | @import 'site.scss'; 85 | ``` 86 | 87 | **site.scss** 88 | ```scss 89 | @import 'directional.scss'; 90 | 91 | // Your site styles here using directional-scss variables, functions, and mixins 92 | ``` 93 | 94 | Then reference the appropriate bundle (site-ltr.css or site-rtl.css) needed for the current page: 95 | ```html 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | ``` 105 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | 46 | [Dd]ebug/ 47 | [Rr]elease/ 48 | x64/ 49 | build/ 50 | [Bb]in/ 51 | [Oo]bj/ 52 | 53 | # MSTest test Results 54 | [Tt]est[Rr]esult*/ 55 | [Bb]uild[Ll]og.* 56 | 57 | *_i.c 58 | *_p.c 59 | *.ilk 60 | *.meta 61 | *.obj 62 | *.pch 63 | *.pdb 64 | *.pgc 65 | *.pgd 66 | *.rsp 67 | *.sbr 68 | *.tlb 69 | *.tli 70 | *.tlh 71 | *.tmp 72 | *.tmp_proj 73 | *.log 74 | *.vspscc 75 | *.vssscc 76 | .builds 77 | *.pidb 78 | *.log 79 | *.scc 80 | 81 | # Visual C++ cache files 82 | ipch/ 83 | *.aps 84 | *.ncb 85 | *.opensdf 86 | *.sdf 87 | *.cachefile 88 | 89 | # Visual Studio profiler 90 | *.psess 91 | *.vsp 92 | *.vspx 93 | 94 | # Guidance Automation Toolkit 95 | *.gpState 96 | 97 | # ReSharper is a .NET coding add-in 98 | _ReSharper*/ 99 | *.[Rr]e[Ss]harper 100 | 101 | # TeamCity is a build add-in 102 | _TeamCity* 103 | 104 | # DotCover is a Code Coverage Tool 105 | *.dotCover 106 | 107 | # NCrunch 108 | *.ncrunch* 109 | .*crunch*.local.xml 110 | 111 | # Installshield output folder 112 | [Ee]xpress/ 113 | 114 | # DocProject is a documentation generator add-in 115 | DocProject/buildhelp/ 116 | DocProject/Help/*.HxT 117 | DocProject/Help/*.HxC 118 | DocProject/Help/*.hhc 119 | DocProject/Help/*.hhk 120 | DocProject/Help/*.hhp 121 | DocProject/Help/Html2 122 | DocProject/Help/html 123 | 124 | # Click-Once directory 125 | publish/ 126 | 127 | # Publish Web Output 128 | *.Publish.xml 129 | *.pubxml 130 | 131 | # NuGet Packages Directory 132 | ## TODO: If you have NuGet Package Restore enabled, uncomment the next line 133 | #packages/ 134 | 135 | # Windows Azure Build Output 136 | csx 137 | *.build.csdef 138 | 139 | # Windows Store app package directory 140 | AppPackages/ 141 | 142 | # Others 143 | sql/ 144 | *.Cache 145 | ClientBin/ 146 | [Ss]tyle[Cc]op.* 147 | ~$* 148 | *~ 149 | *.dbmdl 150 | *.[Pp]ublish.xml 151 | *.pfx 152 | *.publishsettings 153 | 154 | # RIA/Silverlight projects 155 | Generated_Code/ 156 | 157 | # Backup & report files from converting an old project file to a newer 158 | # Visual Studio version. Backup files are not needed, because we have git ;-) 159 | _UpgradeReport_Files/ 160 | Backup*/ 161 | UpgradeLog*.XML 162 | UpgradeLog*.htm 163 | 164 | # SQL Server files 165 | App_Data/*.mdf 166 | App_Data/*.ldf 167 | 168 | ############# 169 | ## Windows detritus 170 | ############# 171 | 172 | # Windows image file caches 173 | Thumbs.db 174 | ehthumbs.db 175 | 176 | # Folder config file 177 | Desktop.ini 178 | 179 | # Recycle Bin used on file shares 180 | $RECYCLE.BIN/ 181 | 182 | # Mac crap 183 | .DS_Store 184 | 185 | 186 | ############# 187 | ## Python 188 | ############# 189 | 190 | *.py[co] 191 | 192 | # Packages 193 | *.egg 194 | *.egg-info 195 | dist/ 196 | build/ 197 | eggs/ 198 | parts/ 199 | var/ 200 | sdist/ 201 | develop-eggs/ 202 | .installed.cfg 203 | 204 | # Installer logs 205 | pip-log.txt 206 | 207 | # Unit test / coverage reports 208 | .coverage 209 | .tox 210 | 211 | #Translations 212 | *.mo 213 | 214 | #Mr Developer 215 | .mr.developer.cfg 216 | --------------------------------------------------------------------------------