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

【问题标题】：Using @mixin to achieve RTL support on Angular使用 @mixin 在 Angular 上实现 RTL 支持
【发布时间】：2020-11-02 22:56:33
【问题描述】：

我正在使用 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">

有什么想法吗？

【问题讨论】：

标签： css angular sass right-to-left left-to-right

【解决方案1】：

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

改为无。

【讨论】：