Search code examples
cssangularsassright-to-leftleft-to-right

Using @mixin to achieve RTL support on Angular

I am using a mixin to convert my Angular app from LTR to RTL accordingly.

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

When I use @include, for some reason it doesn't work. (html tag is defined properly)

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

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

Any ideas why?

Solution

  • For those who will encounter this issue at the future, the problem was component's encapsulation - it was set to Emulated which probably interfered with the classes names.

    Set it to None instead.