Question

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

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

生成的CSS将所有与方向相关的Susy CSS从右向左更改，并且不会添加[dir="rtl"]。

我做错了什么？

Answer 1

不幸的是，Sass（或Susy）无法了解您的HTML。由于事物是预编译的，因此您必须将实际样式嵌套在交换机中，而不仅仅是变量设置。这可能意味着两个不同的编译样式表，您可以使用该设置在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 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
}

还有许多其他变体，以及您可以添加的灵活性功能。但这应该让你开始。

Susy（Compass的响应式网格）文本方向

1 个答案: