Susy (Responsive grids for Compass) text direction

Question

The Susy grid has a $from-direction variable, but I can't use it like so:

[dir="rtl"] {$from-direction: right;}

The generated CSS changes all direction related Susy CSS to right-to-left and is not prepended with [dir="rtl"].

What am I doing wrong?

Answer 1

Unfortunately there is no way for Sass (or Susy) to know anything about your HTML. Because things are pre-compiled, you have to nest the actual styles inside your switch, not just the variable setting. That probably means two different compiled stylesheets, which you can do easily in Sass, using that setting.

You'll need two scss files, e.g. rtl.scss and ltr.scss. Each one starts with that variable, and then imports all the necessary partials for your site:

// rtl.scss
$from-direction: right;

@import "my-site-partials.scss";

and

// ltr.scss
$from-direction: left;

@import "my-site-partials.scss";

Then you just need to load the correct css output file in your HTML depending on the direction. You can also do it in a single file, but you'll be loading twice the code you use in either case, and nesting all your styles an extra level. I recommend the two-file approach.

UPDATE: A Single-file approach.

You can use the same technique in a single file, but it will require an extra wrapper around all your styles. Something like this:

@each $dir in ltr, rtl {
  $from-direction: if(ltr, left, right);
  [dir="#{$dir}"] {
    // your styles
  }
}

You could make that into a mixin:

@mixin bi {
  @each $dir in ltr, rtl {
    $from-direction: if(ltr, left, right);
    [dir="#{$dir}"] {
      @content;
    }
  }
}

@include bi {
  // your styles
}

Or you could override only specific styles that change with direction:

@mixin rtl {
  $from-direction: right;

  [dir="rtl"] {
    @content;
  }

  $from-direction: left;
}

// your ltr styles

@include rtl {
  // your rtl overrides
}

There are many other variations on that, and features you could add for flexibility. But this should get you started.