Categories
Mastering Development

Swap css classes in Sass

Note: this is not a duplicate

I am using a Sass/css library in my project and that library frequently used the following classes :

.right {
...
}

.left {
...
}

Now without changing the library I want to achieve a support for RTL languages, suppose that the only thing that I should do in my project is to swap .left and .right with each other.
So far to do this I created three classes :.rtl, .start and .end. For .rtl languages like Persian or Arabic the .start should extend everything from .right and .end should extend everything from .left if the any parents has .rtl class. so :

The following code does NOT work :

    /* LTR languages like English  */
    .start {
      
      /* goal: every css regarding to .left (like i.left{...} ul.left{...}, etc) should be included here */
    @extend .left; 
    }
    
    .end {
      
     /* goal: every css regarding to .right (like i.right{...} ul.right{...},etc)  should be included here */
     @extend .right;
    }

/* RTL languages like Persian and Arabic */

.rtl .start {
  @extend .right;
}

.rtl .end {
  @extend .left; 
}

So if I have the following markup I just have to add .rtl class to body element :

<body class="rtl" >
...
<div  class="start" > this takes .right if .rtl exists in the parents and takes .left when it doesn't </div> 

...
<div  class="end" > this takes .left if .rtl exists in the parents and takes .right when it doesn't </div>  

...
</body>

I know my SCSS code does not work because it does not even generates .start and .end classes but what is the alternative to @extend and how can I achieve that?

Leave a Reply

Your email address will not be published. Required fields are marked *