RTL Solution

Sets up flip function and variables for RTL layouts.

See (https://github.com/jamesl1001/RTL-Sass#readme) for a list of properties that need to be flipped.

Interpolation should be used for any property which has a direction (e.g. padding-left, margin-right, border-right, left, etc.)
flip() should be used for all other properties

@function flip($value_ltr, $value_rtl) {
  @if $rtl { @return $value_rtl; }
  @else { @return $value_ltr; }
}

$padding-left:    padding-left;
$padding-right:   padding-right;
$margin-left:     margin-left;
$margin-right:    margin-right;
$border-right:    border-right;
$left:            left;
$right:           right;

@if $rtl {
  $padding-left:  padding-right;
  $padding-right: padding-left;
  $margin-left:   margin-right;
  $margin-right:  margin-left;
  $border-right:  border-left;
  $left:          right;
  $right:         left;
}

// Usage examples:
// .class {
//   #{$padding-left}: 8px;
//   #{$padding-right}: 8px;
//   #{$margin-left}: 8px;
//   #{$margin-right}: 8px;
//   #{$left}: 8px;
//   #{$right}: 8px;
//   margin: flip(1px 2px 3px 4px, 1px 4px 3px 2px);
//   float: flip(left, right);
// }

// LTR output:
// .class {
//   padding-left: 8px;
//   padding-right: 8px;
//   margin-left: 8px;
//   margin-right: 8px;
//   left: 8px;
//   right: 8px;
//   margin: 1px 2px 3px 4px;
//   float: left;
// }

// RTL output:
// .class {
//   padding-right: 8px;
//   padding-left: 8px;
//   margin-right: 8px;
//   margin-left: 8px;
//   right: 8px;
//   left: 8px;
//   margin: 1px 4px 3px 2px;
//   float: right;
// }
Posted Friday, April 12th, 2013 under BBC.

One comment so far

  1. Well done! I see you and Mark found a really elegant solution :)

Leave a Reply

*