Susy change flow from rtl to ltr if a class exists

Question

I need the $susy variable to change from rtl to ltr if an ar class exists in body. I need to do it to support multi lingual on my site,below is the code for the same

.page-container {
    background-color: red;
    @include container($susy);

    @include susy-breakpoint($medium) {
        background-color: yellow;
        @include container($susy-medium);
    }

    @include susy-breakpoint($large) {
        background-color: lightgreen;
        @include container($susy-large);
    }

    &.ar {
        //change flow to rtl
    }

}


$medium: 768px; //tab
$large: 1024px; //desktop

//susy grid params small
$column-numbers-small: 6;
$column-width-small: 40px;
$column-gutter-small: 16px;
$available-width-small: 336px;

//susy grid params medium
$column-numbers-medium: 12;
$column-width-medium: 42px;
$column-gutter-medium: 20px;
$available-width-medium: 744px;


//susy grid params large
$column-numbers-large: 12;
$column-width-large: 86px;
$column-gutter-large: 24px;
$available-width-large: 1320px;

$susy: (
    container: $available-width-small,
    container-position: center,
    columns: $column-numbers-small,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-small/$column-width-small,
);

$susy-medium: (
    container: $available-width-medium,
    container-position: center,
    columns: $column-numbers-medium,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-medium/$column-width-medium,
);

$susy-large: (
    container: $available-width-large,
    container-position: center,
    columns: $column-numbers-large,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-large/$column-width-large,
);

$susy-large-ar: (
    flow: rtl,
    container: $available-width-large,
    container-position: center,
    columns: $column-numbers-large,
    math: fluid,
    output: isolate,
    gutter-position: split,
    gutters: $column-gutter-large/$column-width-large,
);

Can somebody please suggest how to override this flow direction dynamically.

Answer 1

This isn't possible in the way you've currently framed it. One of the major limitations of using a preprocessor (like Sass) is that variables do not have access to the DOM. That means there is no way to change a variable based on a body class. There are a few ways to work around that, but none of them are simple and fully dynamic. Basically, you have to create duplicate styles for each direction.

Option 1: Separate Output CSS

Some people do that with separate ltr and rtl stylesheets. Rather than adding a class to flip direction, you load a different stylesheet. To make the Sass work, create two sass files (e.g ltr.scss and rtl.scss) – and set them up like this:

// set your flow at the top of each document…
$flow: (flow: rtl);

Then put all your actual styles in Sass "partials" (_filename). One of those partials can merge the new flow into your existing variables:

// Merge flow with other Susy settings…
$susy: map-merge($susy, $flow);
$susy-medium: map-merge($susy-medium, $flow); // etc…

Then import your partials into each document. This way you can compile the same code, with different variables…

@import 'flow-setup';
@import 'actual-style-partials';

Option 2: Inline Duplication

The other option I've seen people use to create a class system (rather than split stylesheets) gets kinda bulky in your code:

.element {
  @include span(3 of 12);

  .rtl & {
    @include span(3 of 12 rtl);
  }
}

You can write a mixin to do that for you automatically:

@mixin flow-span($details) {
  @include span($details);

  $rtl: append($details, rtl);
  .rtl & {
    @include span($rtl);
  }
}

You would have to do the same thing for every Susy mixin you use.

Sorry neither option is simple, but that's about the best you can do in a pre-processor.