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 和 Sass 工作原理之间的常见混淆。 CSS 是 DOM-aware，因为它与 HTML 一起被浏览器编译。 Sass 在不同的层工作，不知道您的 CSS.

隐含的 DOM 结构

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

为了根据选择器更改布局，您必须提供完整的两种布局 - 而不仅仅是一种布局和范围变量更改。这意味着更像这样：

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

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

有一些解决方法可以减少重复，但 none 就像您希望的那样简单干净。它们基本上涉及找到使用不同变量和额外选择器两次编译相同代码块的方法。

SASS、SUSY 和 RTL - 尝试在动态设置 [dir="rtl"] 时设置特定的布局规则

SASS, SUSY and RTL - trying to set specific layout rules when [dir="rtl"] is set dynamically

sass

right-to-left

susy