[SOLVED] SASS, SUSY and RTL - trying to set specific layout rules when [dir="rtl"] is set dynamically

SASS, SUSY and RTL - trying to set specific layout rules when [dir="rtl"] is set dynamically

Using SASS/SUSY, I am trying to create RTL rules that only apply when [dir="rtl"] is set (dynamically) but my layout is taking on the RTL flow rules by default. How do I do this with SUSY?

I have a Demo here

$default-dir: (
    math: fluid,
    columns: 12,
    gutter-position: split,
    gutters: 0,
    flow: ltr
);

.boxes{
    width: 100%;
    display: block;
    margin: 0 auto;
    max-width: 1280px;
    @include clearfix;
    @include layout($default-dir);

   [dir="rtl"] &{
    @include layout(rtl);//I EXPECT THIS LINE TO ONLY APPLY TO RTL [dir="rtl]
    background-color: orange;
    }
    ...
}

Solution

This is a common confusion between how CSS works, and how Sass works. CSS is DOM-aware, because it is compiled by browsers along with HTML. Sass is working at a different layer, unaware of the DOM structures implied by your CSS.

The layout mixin is a Sass abstraction, changing a few global Sass variables that Susy can refer back to — it has no actual CSS output of its own. The layout mixin changes the output of other functions and mixins that come after it in the Sass. You can also use with-layout() { <content> } to wrap entire blocks of mixins and functions — but in both cases, the variables only exist in Sass.

In order to change the layout based on a selector, you have to provide both layouts in full — not just one layout, and a scoped variable change. That means something more like this:

.box-item {
  @include span(1 of 2);

  [dir='rtl'] & {
    @include span(1 of 2 rtl)
  }
}

There are some workarounds to make that less repetitive, but none are as simple and clean as what you hoped for. They basically involve finding ways to compile the same code block twice, with different variables and an extra selector.