使用@mixin 在 Angular 上实现 RTL 支持

Question

我正在使用 mixin 将我的 Angular 应用程序从 LTR 相应地转换为 RTL。

@mixin rtl($property, $ltr-value, $rtl-value) {
  [dir='ltr'] & {
    #{$property}: $ltr-value;
  }

  [dir='rtl'] & {
    #{$property}: $rtl-value;
  }
}

@mixin rtl-prop($ltr-property, $rtl-property, $value) {
  [dir='ltr'] & {
    #{$ltr-property}: $value;
  }

  [dir='rtl'] & {
    #{$rtl-property}: $value;
  }
}

当我使用@include 时，由于某种原因它不起作用。（html 标签定义正确）

@include rtl(border-radius, 0 10px 80px 0, 0 80px 10px 0);

<html lang="he" dir="rtl">

知道为什么吗？

Answer 1

对于那些将来会遇到此问题的人，问题是组件的封装 - 它被设置为仿真，这可能会干扰类名称。

改为 None。

使用@mixin 在 Angular 上实现 RTL 支持

Using @mixin to achieve RTL support on Angular

css

angular

sass

right-to-left

left-to-right