How to rearrange list values in Sass

If you do a lot work with right-to-left layouts, this could be potentially very useful.

RTL layouts are usually completely mirrored; float, padding, margin, border and position and basically any other selector that can be assigned right or left will need to be flipped.

In Sass, we can combine mixins with variables to make this very easy.

Let’s say we have two pages: one is LTR and one is RTL.

Keeping maintainability in mind, we don’t want to have to code two different stylesheets for each page. If we did, and we wanted to make a change, we would have to make that change twice.

So this is how we are going to do it…

We will have three .scss files:

  • ltr.scss
  • rtl.scss
  • _base.scss

Note: the underscore (_) before the filename means that file is being imported by another file.

The ltr.scss and rtl.scss files are essentially variable setup files which import the _base.scss file. This is how they look:

/*false.scss*/
$rtl: false;
@import "base.scss";

 

/*rtl.scss*/
$rtl: true;
@import "base.scss";

So these files set the $rtl variable to either true or false and then import the same _base.scss file.

The _base.scss file looks like this:

/*_base.scss*/
@mixin marginlr($t, $r, $d, $l) {
  @if $rtl {
    margin: $t $l $d $r;
  } @else {
    margin: $t $r $d $l;
  }
}

#element {
  @include marginlr(8px, 0, 8px, 16px);
}

This mixin will flip the left and right values of the list if the $rtl variable is set to true.

The output .css files will look like this:

/*ltr.css*/
margin: 8px 0 8px 16px;

 

/*rtl.css*/
margin: 8px 16px 8px 0;

The same technique can be used with padding, position and all the other required selectors.

Posted Monday, September 17th, 2012 under Scrapbook.

One comment so far

Leave a Reply

*