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.

`direction: rtl`, see https://www.w3schools.com/cssref/pr_text_direction.asp — Rene van der Lende, Jul 14 '17 at 15:37
direction works best with flex, as with susy there are floats that it adds on containers. direction: rtl will not change the float left to float right. Thanks anyway. — Novice, Jul 15 '17 at 04:59

score 1 · Accepted Answer · answered Jul 14 '17 at 17:36

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.

Thanks for the descriptive answer. If both these options are not simple then instead of using susy for the grids should I create a custom grid for layout and use flex for positioning elements inside it? As with flex putting direction:rtl on the container can handle most of the things very easily and requires no extra step since flex does not apply any float properties for positioning. — Novice, Jul 15 '17 at 05:08
Flexbox is a great solution, yes. If you still want Susy to do the math, use the functions instead of the mixins. They take the same basic syntax, and it would look something like this: `flex: 1 1 span(3 of 12);` (you could use any values you need, of course. Another option with sass is `flex: 1 1 percentage(3/12);` (which works if you don't have gutters). — Miriam Suzanne, Jul 17 '17 at 00:37
Hey @MiriamSuzanne the site does not give an example with flex, can you please help with the same. I did go through one of your articles but that does not cover the FLOAT Vs. FLEX. — Nitin Suri, Jul 17 '17 at 12:40
@MiriamSuzanne: Thank you for your answer, I saw your article in which you mentioned the grid implementation. Can you please quote an example for the same SUSY3+Flex — Novice, Jul 18 '17 at 11:22
Here's a [rough example with Flexbox](https://codepen.io/mirisuzanne/pen/vZwPpZ?editors=1100) demonstrating a complex nested layout. Flexbox provides a number of additional options that I haven't used here – but you can learn that in a standard flexbox tutorial. The important thing is that you can use our `span` function as the `flex-basis` for elements, in order to size them to the grid. — Miriam Suzanne, Jul 18 '17 at 20:01

Susy change flow from rtl to ltr if a class exists

1 Answers1

Option 1: Separate Output CSS

Option 2: Inline Duplication