How to support RTL and LTR in sass

Question

What would be the best way to implement RTL support in Sass?

I don't like to override css properties and I don't like to add multiple css files (e.g styles.css + styles-rtl.css)

Can you suggest any better way?

Thanks.

Answer 1

1. Handle it using sass mixins

   • pros:
     1. Smaller output file in comparison to method #2
     2. You'll have a semantic sass because of using rtl and ltr mixins
   • cons:
     1. You can't support both rtl and ltr both in a single output file

2. Handle it using dir attr of html tag

   • pros:
     1. You don't need to compile your sass file twice (you can support rtl and ltr in a single file)
   • cons:
     1. Your output file might get heavy because of long css rules

3. Handle it using sass vars

   • pros:
     1. Smaller output file in comparison to method #2
     2. Smaller sass files in comparison to method #1
   • cons:
     1. You can't support both rtl and ltr both in a single output file
     2. Your sass files are not very semantic like method #1