Reply To: [Solved] SCSS Change Variable depending on parent class

[cheetara63]

Hi there!
I just found myself in some similar situation where I wanted to change sass variables according to a parent class. I read here that it isn´t possible but maybe you can help me to come up with some elegant solution.

I have a website translated to several languages, including arabic. The characters in the arabic font are much smaller than the regular (latin) fonts, which makes it difficult to read. I cannot change the fonts, so I have to increase the font-size for the arabic version (which has the lang-ar class in the body).

So far I have a file with :

body.lang-ar {
   ..... a whole bunch of classes ..... { 
    font-size: $fs_normal_ar; 
   }
}

, but this doesn´t seem right to me. I have several font-size variables (fs_small, fs_normal, fs_big) and I wanted to add 10px to every variable whenever I am in the arabic version.

Changing the base font size in the html element (a percentage font-size) will not do since everything is in rem units (widths, heights, etc) and it ruins all the layout.

I was thinking about doing a mixin like:

@mixin calc_fs($value) {
  font-size: ($value) rem;
  .lang-ar & {
    font-size: ($value+10px) rem;
  }
}

but I guess this won´t work everytime because of the nesting.
So… do you have any hint for me? How would you do it?

I´m sure there is no perfect/easy solution, but there should be a better one than the ones I´ve come up with. I don´t mind having to change a bunch of code, if in the end I get a clean and maintainable solution.

Thanks for the help!