如何制作可在scss中重用的字体变量

Question

我正在做一个 Angular 项目，我们使用 scss。我们希望在整个应用程序中标准化我们对字体的使用。例如。而不是在任何地方都使用font-family: Arial，而应该是font-family: $arialFont。

在我当前的 styles.css 中，我们有以下内容。

@font-face {
  font-family: "Helvetica_Neue_Light";
  src: url("./assets/fonts/eot/HelvNeueLight.eot");
  src: url("./assets/fonts/eot/HelvNeueLight.eot")
      format("embedded-opentype"),
    url("./assets/fonts/woff/HelvNeueLight.woff") format("woff"),
    url("./assets/fonts/tff/HelvNeueLight.ttf") format("ttf");
}

@font-face {
  font-family: "Helvetica_Neue_Medium";
  src: url("./assets/fonts/eot/HelvNeueMedium.eot");
  src: url("./assets/fonts/eot/HelvNeueMedium.eot")
      format("embedded-opentype"),
    url("./assets/fonts/woff/HelvNeueMedium.woff") format("woff"),
    url("./assets/fonts/tff/HelvNeueMedium.ttf") format("ttf");
}

@font-face {
  font-family: "Helvetica_Neue_Bold";
  src: url("./assets/fonts/eot/HelvNeueBold.eot");
  src: url("./assets/fonts/eot/HelvNeueBold.eot")
      format("embedded-opentype"),
    url("./assets/fonts/woff/HelvNeueBoldfor.woff") format("woff"),
    url("./assets/fonts/tff/HelvNeueBold.ttf") format("ttf");
}

@font-face {
  font-family: "Helvetica_Neue_Light_Italics";
  src: url("./assets/fonts/eot/HelvNeueLightItalic.eot");
  src: url("./assets/fonts/eot/HelvNeueLightItalic.eot")
      format("embedded-opentype"),
    url("./assets/fonts/woff/HelvNeueLightItalic.woff") format("woff"),
    url("./assets/fonts/tff/HelvNeueLightItalic.ttf") format("ttf");
}

这些只是在其他 scss 文件中用作font-family: 'Helvetica_Neue_Bold' 或font-family: 'Helvetica_Neue_Light_Italics'。这样做的缺点是每当我们需要更改应用程序的字体时，我们都需要在每个实例中进行更改。所以我需要一种方法将每个字体系列名称分配给一个变量并在任何地方使用它，这样下次字体更改时，我只需在一个地方更改变量的值，

我已经创建了一个 fonts.scss 我放的地方

$helvetica-neue-light: "Helvetica_Neue_Light";
$helvetica-neue-medium: "Helvetica_Neue_Medium";
$helvetica-neue-bold: "Helvetica_Neue_Bold";
$helvetica-neue-light-italics: "Helvetica_Neue_Light_Italics";

我将它导入到第一个文件 styles.css 中，并将变量分配给 font-family。但是现在我必须在每个 scss 文件中导入 fonts.scss，这也很麻烦。还有其他方法可以完成这项任务吗？请帮忙

Answer 1

如果您使用 sass，则必须将定义变量的文件导入您要使用这些变量的每个文件中。

另一种方法是使用CSS variables。您可以一次性声明它们并在不导入的情况下重复使用它们。

styles.scss

:root
{
  /** hard coded **/
  --helvetica-neue-light: "Helvetica_Neue_Light";
  --helvetica-neue-medium: "Helvetica_Neue_Medium";
  /** or use sass variable**/
  --helvetica-neue-light-italics: $helvetica-neue-light-italics;
}

component.scss

div
 {
   font-family: var(--helvetica-neue-light);
 }

Stackblitz demo

注意：这不适用于 IE