如何在 sass 中支持 RTL 和 LTR

Question

在 Sass 中实现 RTL 支持的最佳方式是什么？

我不喜欢覆盖 css 属性，也不喜欢添加多个 css 文件（例如 styles.css + styles-rtl.css）

你能提出更好的方法吗？

谢谢。

Answer 1

1. Handle it using sass mixins

   • 优点：
     1. 与方法 #2 相比输出文件更小
     2. 由于使用 rtl 和 ltr mixins
     ，您将拥有语义 sass
   • 缺点：
     1. 您不能在单个输出文件中同时支持 rtl 和 ltr

2. Handle it using dir attr of html tag

   • 优点：
     1. 您不需要编译您的 sass 文件两次（您可以在单个文件中支持 rtl 和 ltr）
   • 缺点：
     1. 由于长 css 规则，您的输出文件可能会变重

3. Handle it using sass vars

   • 优点：
     1. 与方法 #2 相比输出文件更小
     2. 与方法 #1
     相比，sass 文件更小
   • 缺点：
     1. 您不能在单个输出文件中同时支持 rtl 和 ltr
     2. 你的 sass 文件不像方法 #1 那样语义化

Answer 2

您还可以考虑将 postcss-rtl 用于 postcss

https://github.com/vkalinichev/postcss-rtl
https://postcss.org/