Susy change flow from rtl to ltr if a class exists - css

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.