css - 根据其他规则应用 CSS 规则 - RTL 特定样式

Question

介绍

我正在尝试构建一个适用于多种文化、具有不同阅读方向的网站。

为此，我只需在根 HTML 元素上添加 dir="rtl" 属性即可。

我的问题是我有一些特定于一个方向或另一个方向的 CSS 规则(大多数情况下是边距或填充)。

属性选择器尝试失败

虽然我可以简单地使用 the attribute selector但是 dir 属性只设置在根元素上，所以这是行不通的:

selector {
  &[dir="ltr"] {
    // LTR specific
  }

  &[dir="rtl"] {
    // RTL specific
  }
}

例如，在这个 demo 上，如果应用程序在 rtl 中，标题应该在右边有 5px 的边距，如果在标准 ltr 中，标题应该在左边有 5px 的边距。

其他想法

我注意到 direction 被正确设置为 rtl，有没有办法在 CSS 或 Sass 选择器 ?

编辑和精度

我好像忘记了一个重点。我正在使用 Vue.js 构建网站，dir 属性绑定(bind)在主要组件 (App) 中，RTL/LTR 特定的 CSS 规则可以在相同的组件或其他独立的组件。

Answer 1

按照您的 css 代码，您可以使用 SASS at-root 指令执行此操作 DEMO .所以这个:

#app {
  width: 300px;
  height: 100px;
  border: 1px solid red;

  h1 {
    @at-root {
      [dir="rtl"]#{&} {color: green}
    }

    @at-root {
      [dir="ltr"]#{&} {color: red}
    }
  }
}

它将编译成这个 css。

#app {
  width: 300px;
  height: 100px;
  border: 1px solid red;
}
[dir="rtl"]#app h1 {
  color: green;
}
[dir="ltr"]#app h1 {
  color: red;
}