如何覆盖 fonts 的 scss 变量？

Question

Is there any way to override scss variables used for fonts. i have used font variables across the website and now i need to change the font specifically for a localized website .

i need to override using :lang attribute in html. is there any way to override variables or any implementation idea to achieve this. my idea is to achieve something like this. if this is achievable by any means we don't require to override in all places where this fonts are declared.

$primary-font: 'Roboto';
:lang('fr') { $primary-font: 'locator' }

Added codepen of what i am trying to solve

Answer 1

I haven't been able to test this but given it compiles to a CSS key value pair can you use

'locator !important'

Not ideal coding I know but it might work

Answer 2

You have to give the newly assigned value as font-family as follow.

 $primary-font: 'Locator'; * { font-family: $primary-font; } [lang="fr"] { $primary-font: 'oswald'; font-family: $primary-font; }

 <div lang="fr"> <p>test frace</p> </div> <p>test normal</p>