Сьюзи (Адаптивные сетки для Компаса) направление текста

Question

Сьюзи сетка имеет $from-direction переменная, но я не могу использовать это так:

[dir="rtl"] {$from-direction: right;}

Сгенерированный CSS меняет все связанные с направлением Susy CSS на справа налево и не содержит префикс [dir="rtl"],

Что я делаю неправильно?

Answer 1

К сожалению, у Sass (или Susy) нет возможности узнать что-либо о вашем HTML. Поскольку все предварительно скомпилировано, вы должны вкладывать фактические стили в ваш переключатель, а не только в переменную. Это, вероятно, означает две разные скомпилированные таблицы стилей, которые вы можете легко сделать в Sass, используя этот параметр.

Вам понадобятся два файла scss, например rtl.scss а также ltr.scss, Каждый начинается с этой переменной, а затем импортирует все необходимые пароли для вашего сайта:

// rtl.scss
$from-direction: right;

@import "my-site-partials.scss";

а также

// ltr.scss
$from-direction: left;

@import "my-site-partials.scss";

Тогда вам просто нужно загрузить правильный выходной файл CSS в ваш HTML в зависимости от направления. Вы также можете сделать это в одном файле, но вы будете загружать вдвое больше кода, который вы используете, и вкладывать все ваши стили на дополнительный уровень. Я рекомендую двухфайловый подход.

ОБНОВЛЕНИЕ: подход с одним файлом.

Вы можете использовать ту же технику в одном файле, но это потребует дополнительной оболочки для всех ваших стилей. Что-то вроде этого:

@each $dir in ltr, rtl {
  $from-direction: if(ltr, left, right);
  [dir="#{$dir}"] {
    // your styles
  }
}

Вы можете превратить это в миксин:

@mixin bi {
  @each $dir in ltr, rtl {
    $from-direction: if(ltr, left, right);
    [dir="#{$dir}"] {
      @content;
    }
  }
}

@include bi {
  // your styles
}

Или вы можете переопределить только определенные стили, которые меняются в зависимости от направления:

@mixin rtl {
  $from-direction: right;

  [dir="rtl"] {
    @content;
  }

  $from-direction: left;
}

// your ltr styles

@include rtl {
  // your rtl overrides
}

Существует множество других вариантов и функций, которые вы можете добавить для большей гибкости. Но это должно помочь вам начать.