CODEWITHSUNDEEP
sass
user6769642
user6769642

Reputation: 33

How to use :lang() to set font variable in scss

How can I set a font variable using the :lang() selector using SCSS? I've tried a couple of different ways but I always end up with the default language being output in the end.

I was originally thinking something simple like was the approach.

$font-main:    "Open Sans",Helvetica,Arial,sans-serif;
:lang(fa)  {
    $font-main:  "IranianSansRegular", serif;
  }

body {font-family: $font-main;}

Then also tried this

$font-main: "Open Sans",Helvetica,Arial,sans-serif;

body {
    font-family: $font-main;    
        &:lang(fa)  {
        $font-main:  "IranianSansRegular", serif;
        }

But I keep ending up with open sans as my only font no matter what. I don't think its relevant but this is s bootstrap 3+ based project

Upvotes: 1

Views: 1004

Answers (1)

user4994625
user4994625

Reputation:

You don't need variables to do that, you can use CSS syntax:

body {
    font-family: Arial,sans-serif; 
    color:blue;
}

:lang(fa)  {
    font-family: Georgia, serif;
    color:red;
}
<p>Normal text</p>
<p lang="fa">Text width lang attribute and "fa" value</p>

Anyway if you want to use variables you can do something like this:

$font-main: "Open Sans",Helvetica,Arial,sans-serif;

body{
    font-family: $font-main;
}   

:lang(fa) {
    $font-main: "IranianSansRegular", serif;
    &{
        font-family: $font-main;
    } 
}

Upvotes: 1

Related Questions