SASS，SUSY和RTL - 试图在动态设置[dir =“rtl”]时设置特定布局规则

Question

使用SASS/SUSY， 我尝试创建仅适用于[dir =“rtl”]的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，因为它是由浏览器和HTML一起编译的。 Sass在另一层工作，不知道你的CSS暗示的DOM结构。

mixin是一个Sass抽象概念，改变了Susy可以参考的一些全局Sass变量 - 它没有自己的实际CSS输出。 mixin改变了Sass中后面的其他函数和混合的输出。您也可以使用with-layout() { <content> }来包装整个mixin和函数块 - 但在这两种情况下，变量只存在于Sass中。

为了根据选择器更改布局，您必须全部提供布局 - 不只是一个布局和一个作用域变量更改。这意味着更多的东西是这样的：

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

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

有一些解决方法，使少重复，但没有一个是简单，干净，你希望什么。它们基本上涉及寻找两次编译相同代码块的方法，使用不同的变量和一个额外的选择器。