How to override scss variables for fonts?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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>