css - 使用 @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">

任何想法为什么？

score 0 · Accepted Answer

对于将来会遇到这个问题的人来说，问题在于组件的封装——它被设置为 Emulated，这可能会干扰类名。

将其设置为无。

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

1 回答 1

Related

Reference