/directional-scss

Makes supporting CSS for left-to-right (LTR) and right-to-left (RTL) easy with SASS.

Primary LanguageCSS

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);
}