如何在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/