css - 从右到左语言的有效 CSS 布局切换

Question

目前，我在模板中支持从右到左 (RTL) 语言的常用方法是简单地.rtl向标签添加一个类body，然后遍历我现有的所有从左到右 CSS 并添加左/右覆盖为合适的。

例如，我的站点菜单默认情况下可能如下所示：

.site-nav {
  position: absolute;
  left: 0;
  top: 0;
}

...然后以这种方式手动覆盖 RTL 语言（在 CMS 级别使用一些模板逻辑将.rtl类添加到body）：

.rtl .site-nav {
  left: auto;
  right: 0;
}

我的问题是，这似乎是劳动密集型的，而且效率不高。我想知道其他人可能会想出什么解决方案来简化它。

顺便说一句，我正在使用 Compass 环境来生成我的 CSS。但是我不知道如何从当前的嵌套中逃脱，.rtl以在当前元素的默认样式附近编写一个修饰符。然而，这在理论上将非常有用，但我根本不知道是否可以body在深度嵌套的 Sass 规则中执行一直查找到元素的查找。

score 0 · Accepted Answer

在要更改文本流的任何位置添加 .rtl 类。即使您不想更改它（对于“普通”语言）。

不要在默认的 css 文件中使用该类。

添加一个仅包含的 css 文件

.rtl {
  left: auto;
  right: 0;
}

每当您拥有 rtl 语言时。如果您希望所有 div 的行为与您可以替换.rtl的div一样。

1 回答 1