How to change stylus variable for specific css condition

Question

I'm building a multi language vuejs web application using vuetify. I want to use an Arabic font for RTL version of the app by modify the $body-font-family variable using stylus, I tried to do that with the below code:

.application  
  &--is-rtl {
    background:gray !important
    $body-font-family = 'Droid Arabic Kufi', serif !important
  }  

The background changed successfully but the font variable did not, please help me to make this code work. Thanks in advance.

Answer 1

Changing a variable is a hierarchy situation. Where you change the variable, only the classes after that change will be affected.

// No Change
.application 
  font-family $body-font-family
  &--is-rtl
    $body-font-family = 'Droid Arabic Kufi', serif

// Change
.application 
  font-family $body-font-family
  &--is-rtl
    $body-font-family = 'Droid Arabic Kufi', serif
    font-family $body-font-family !important