Text Susy（指南针响应网格）文字方向

Susy网格有一个

$from direction

变量，但我不能这样使用它：

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

生成的CSS将所有方向相关的Susy CSS更改为从右到左，并且未在前面加上

[dir=“rtl”]

---

我做错了什么？

不幸的是，Sass（或Susy）无法了解有关HTML的任何信息。因为事情是预编译的，所以您必须将实际样式嵌套在交换机中，而不仅仅是变量设置。这可能意味着两个不同的已编译样式表，使用该设置，您可以在Sass中轻松地完成这项工作

您需要两个scss文件，例如

rtl.scss

和

ltr.scss

。每一个都从该变量开始，然后导入站点所需的所有部分：

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

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

及

然后，您只需要根据方向在HTML中加载正确的css输出文件。您也可以在一个文件中完成这项工作，但无论哪种情况，您都将加载两倍于您使用的代码，并将所有样式嵌套到一个额外的级别。我推荐两个文件的方法

更新：单文件方法

您可以在单个文件中使用相同的技术，但需要在所有样式周围使用额外的包装器。大概是这样的：

@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
}

---

在这方面还有许多其他的变化，您可以添加一些功能以提高灵活性。但这应该让你开始了。

谢谢，埃里克。这似乎是解决方案喜欢使用的方法。但是，我希望使用

lang

和

dir

属性作为语言和文本方向样式的选择器，而不是单独的样式表。我正在追求一种策略，即与模块相关的所有样式（媒体查询、特定于浏览器、特定于语言等）都保持在一起。谢谢您的时间（和网格），Eric，我非常感谢。我将使用这些方法。

@mixin rtl {
  $from-direction: right;

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

  $from-direction: left;
}

// your ltr styles

@include rtl {
  // your rtl overrides
}