text - Susy（指南针的响应网格）文本方向

Question

Susy 网格有一个$from-direction变量，但我不能像这样使用它：

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

生成的 CSS 将所有与方向相关的 Susy CSS 更改为从右到左，并且不以[dir="rtl"].

我究竟做错了什么？

Answer 1

不幸的是，Sass（或 Susy）无法了解您的 HTML。因为事情是预编译的，所以你必须在你的 switch 中嵌套实际的样式，而不仅仅是变量设置。这可能意味着两个不同的编译样式表，您可以使用该设置在 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";

然后你只需要根据方向在你的 HTML 中加载正确的 css 输出文件。您也可以在单个文件中执行此操作，但您将加载两次在任何一种情况下使用的代码，并将所有样式嵌套一个额外的级别。我推荐两个文件的方法。

更新：单文件方法。

您可以在单个文件中使用相同的技术，但它需要对所有样式进行额外的包装。像这样的东西：

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

你可以把它变成一个mixin：

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

对此还有许多其他变体，您可以添加一些功能以提高灵活性。但这应该让你开始。