SASS, SUSY и RTL - пытается установить конкретные правила компоновки, когда динамически задано [dir = "rtl"]

Question

Использование SASS/SUSY, Я пытаюсь создать правила RTL, которые применяются только тогда, когда [dir = "rtl"] (динамически), но мой макет по умолчанию использует правила потока RTL. Как мне это сделать с SUSY?

У меня есть Demo здесь

$default-dir: (
    math: fluid, 
    columns: 12, 
    gutter-position: split, 
    gutters: 0, 
    flow: ltr 
); 

.boxes{ 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
    max-width: 1280px; 
    @include clearfix; 
    @include layout($default-dir); 

    [dir="rtl"] &{ 
    @include layout(rtl);//I EXPECT THIS LINE TO ONLY APPLY TO RTL [dir="rtl] 
    background-color: orange; 
    } 
    ... 
} 

Answer 1

Это обычная путаница между тем, как работает CSS и как работает Сасс. CSS - DOM-aware, потому что он скомпилирован браузерами вместе с HTML. Сасс работает на другом уровне, не подозревая о структурах DOM, подразумеваемых вашим CSS.

layout mixin - это абстракция Sass, изменяющая несколько глобальных переменных Sass, на которые Susy может ссылаться - у нее нет собственного собственного вывода CSS. Смеситель layout изменяет выходные данные других функций и миксинов, которые появляются после него в Sass. Вы также можете использовать with-layout() { <content> } для обертывания целых блоков микшинов и функций, но в обоих случаях переменные существуют только в Sass.

Чтобы изменить макет на основе селектора, вы должны предоставить оба макета в полном объеме - не только один макет, но и изменение переменной области. Это означает, что что-то больше, как это:

.box-item { 
    @include span(1 of 2); 

    [dir='rtl'] & { 
    @include span(1 of 2 rtl) 
    } 
} 

Есть некоторые обходные пути, чтобы сделать что меньше повторов, но ни один не так просто, и чист, как то, что вы надеялись. Они в основном связаны с поиском способов скомпилировать один и тот же блок кода дважды, с разными переменными и дополнительным селектором.