user6769642 user6769642 - 3 months ago 13
Sass (Sass) Question

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

Answer

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;
    } 
}