Susy меняет поток с rtl на ltr, если класс существует

Мне нужно, чтобы переменная $susy менялась с rtl на ltr, если в теле существует класс ar. Мне нужно сделать это, чтобы поддерживать многоязычность на моем сайте, ниже приведен код для того же

.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,
);

Может кто-нибудь предложить, как динамически переопределить это направление потока.


person Novice    schedule 14.07.2017    source источник
comment
direction: rtl см. w3schools.com/cssref/pr_text_direction.asp.   -  person Rene van der Lende    schedule 14.07.2017
comment
direction лучше всего работает с flex, так как с susy есть плавающие элементы, которые он добавляет к контейнерам. направление: rtl не изменит поплавок слева на поплавок справа. Спасибо, в любом случае.   -  person Novice    schedule 15.07.2017


Ответы (1)


Это невозможно в том виде, в котором вы сейчас это создали. Одним из основных ограничений использования препроцессора (например, Sass) является то, что переменные не имеют доступа к DOM. Это означает, что нет способа изменить переменную на основе класса тела. Есть несколько способов обойти это, но ни один из них не является простым и полностью динамичным. По сути, вам нужно создать повторяющиеся стили для каждого направления.

Вариант 1: отдельный выходной CSS

Некоторые люди делают это с отдельными таблицами стилей ltr и rtl. Вместо добавления класса для изменения направления вы загружаете другую таблицу стилей. Чтобы заставить Sass работать, создайте два файла sass (например, ltr.scss и rtl.scss) и настройте их следующим образом:

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

Затем поместите все свои настоящие стили в Sass «partials» (_filename). Один из этих фрагментов может объединить новый поток с вашими существующими переменными:

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

Затем импортируйте свои части в каждый документ. Таким образом, вы можете скомпилировать один и тот же код с разными переменными…

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

Вариант 2: встроенное дублирование

Другой вариант, который я видел, как люди используют для создания системы классов (вместо разделенных таблиц стилей), становится довольно громоздким в вашем коде:

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

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

Вы можете написать миксин, который сделает это за вас автоматически:

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

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

Вам придется делать то же самое для каждого миксина Susy, который вы используете.

Извините, ни один из вариантов не прост, но это лучшее, что вы можете сделать в препроцессоре.

person Miriam Suzanne    schedule 14.07.2017
comment
Спасибо за описательный ответ. Если оба этих варианта непросты, то вместо использования susy для сеток должен ли я создать собственную сетку для макета и использовать flex для позиционирования элементов внутри нее? Как и в случае с flex, размещение direction:rtl в контейнере может очень легко справиться с большинством вещей и не требует дополнительных действий, поскольку flex не применяет никаких свойств float для позиционирования. - person Novice; 15.07.2017
comment
Flexbox — отличное решение, да. Если вы все еще хотите, чтобы Susy выполняла расчеты, используйте функции вместо примесей. Они используют один и тот же базовый синтаксис, и он будет выглядеть примерно так: flex: 1 1 span(3 of 12); (конечно, вы можете использовать любые значения, которые вам нужны. Другой вариант с sass — flex: 1 1 percentage(3/12); (который работает, если у вас нет желобов). - person Miriam Suzanne; 17.07.2017
comment
Привет, @MiriamSuzanne, на сайте нет примера с flex, не могли бы вы помочь с тем же. Я прочитал одну из ваших статей, но она не распространяется на FLOAT Vs. ФЛЕКС. - person Nitin Suri; 17.07.2017
comment
@MiriamSuzanne: Спасибо за ваш ответ, я видел вашу статью, в которой вы упомянули реализацию сетки. Не могли бы вы привести пример для того же SUSY3+Flex - person Novice; 18.07.2017
comment
Вот грубый пример с Flexbox, демонстрирующий сложный вложенный макет. Flexbox предоставляет ряд дополнительных опций, которые я здесь не использовал, но вы можете изучить их в стандартном руководстве по flexbox. Важно то, что вы можете использовать нашу функцию span в качестве flex-basis для элементов, чтобы подогнать их размер под сетку. - person Miriam Suzanne; 18.07.2017