如何覆盖 fonts 的 scss 变量？

Question

有没有办法覆盖用于 fonts 的scss 变量。 我已经在整个网站上使用了字体变量，现在我需要专门为本地化网站更改字体。

我需要使用 html 中的:lang属性覆盖。 有没有办法覆盖变量或任何实现想法来实现这一点。 我的想法是实现这样的目标。 如果这可以通过任何方式实现，我们不需要在声明此 fonts 的所有地方覆盖。

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

添加了我要解决的问题的代码笔

Answer 1

我无法对此进行测试，但鉴于它编译为 CSS 键值对，您可以使用

'locator !important'

我知道不是理想的编码，但它可能有效

Answer 2

您必须将新分配的值作为 font-family 如下所示。

 $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>