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 修饰符。然而，这在理论上将非常有用，但我只是不知道是否有可能在深层嵌套的 Sass 规则中执行查找一直返回到 body 元素。

Answer 1

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

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

添加一个只包含的css文件

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

只要你有 rtl 语言。如果您希望所有 div 的行为都符合您的要求，您也可以将 .rtl 替换为 div。