Declare variable for different classes - css

Question

I'm using SCSS and I have a variable $arial: 'Arial', serif;
Now I want to do something like that:
.english{
$arial: 'Arial', serif;
font-family: $arial;
}
.japan{
$arial: 'Noto Sans';
font-family: $arial;
}
Because from the beginning, my customer wants to display $arial as 'Arial', but now they're separating it to 2 pages, (English page and Japanese page).

Answer 1

You could use a newer CSS feature called CSS variables to accomplish this. Simple define what variables need to change in what context, and then import them in the definitions themselves. You can find the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Here is an example (using very easily distinguishable fonts):
document.querySelector( 'h1' ).addEventListener( 'click', e => document.body.classList.toggle( 'japanese' ) )
body {
--font: 'Comic Sans MS', monospace;
font-family: var(--font, cursive);
}
body.japanese {
--font: 'Impact';
}
<h1>Lorem Ipsum Dolor Sit Amet</h1>
With a simple class toggle, the variable is updated and the definition only needs to be made once.

Answer 2

I suggest you to make use of CSS Vars as above. To accomplish this in sassy way you can make use of sass map
$map:("english":"'Arial',serif","japan":"'Nato Sans'");
#each $key , $value in $map{
.#{$key}{
font-family:unquote($value);
}
}
output
.english {
font-family: 'Arial',serif;
}
.japan {
font-family: 'Nato Sans';
}