从右到左语言的有效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。