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

问题描述

我正在尝试建立一个具有多种文化背景，阅读方向不同的网站.

I'm trying to build a web site available in multiple cultures, with different reading direction.

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

To do so, I simply add the dir="rtl" attribute on my root HTML element.

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

My issue is that I have some CSS rules that are specific to one direction or the other (margins or paddings, most of the times).

尽管我可以简单地使用属性选择器，但是使用dir 属性仅在根元素上设置，因此不起作用:

I though that I could simply use the attribute selector but the dir attribute is only set on the root element, so this wouldn't work :

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

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

例如，在此演示上，标题的右边距应为5px如果应用程序在 rtl 中，则在左侧；如果应用程序在标准 ltr 中，则在左侧.

For instance, on this demo, the title should have a margin of 5px on the right if the application is in rtl or on the left if it's in standard ltr.

我注意到 direction 正确地设置在 rtl 上，有没有一种方法可以在 CSS 或 Sass 选择器?

I've noticed that the direction is rightfully set at rtl, is there a way to use that rule within a CSS or Sass selector ?

看来我已经忘记了重要的一点.我正在使用Vue.js构建网站， dir 属性绑定在主要组件( App )中，并且RTL/LTR特定的CSS规则可以位于相同的组件或其他独立组件.

It seems that I've forgotten an important point. I'm building the web site using Vue.js, the dir attribute is bind in the main component (App) and the RTL/LTR specific CSS rules can be in the same component or in other self-contained component.

推荐答案

在您的CSS代码之后，您可以使用SASS at-root 指令 演示 .因此:

Following your css code you could do this with SASS at-root directive DEMO. So this:

#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;
}

这篇关于根据其他规则应用CSS规则-RTL特定样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！