Как сделать переменные шрифта, которые можно будет повторно использовать в scss

Question

Я работаю над проектом Angular, и мы используем s css. Мы хотим стандартизировать использование шрифтов во всем приложении. Например, Вместо использования font-family: Arial везде оно должно быть font-family: $arialFont.

В моих текущих стилях . 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");
}

Это просто используется как font-family: 'Helvetica_Neue_Bold' или font-family: 'Helvetica_Neue_Light_Italics' в других файлах s css. Недостатком этого является то, что всякий раз, когда нам нужно изменить шрифт для приложения, нам нужно вносить изменения в каждом отдельном случае. Поэтому мне нужен способ присвоить имя каждого семейства шрифтов переменной и использовать его повсюду, чтобы в следующий раз, когда будет изменение шрифта, мне нужно было изменить значение переменных только в одном месте,

У меня есть создал fonts.s css, где я поместил

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

Я импортировал его в первый файл, стилей. css и назначил переменные в font-family. Но теперь мне нужно импортировать fonts.s css в каждый отдельный файл s css, что тоже вызывает проблемы. Есть ли другой способ выполнить эту задачу? Пожалуйста, помогите

Answer 1

Если вы используете sass, вам необходимо импортировать файл, в котором определены переменные, в каждый файл, в котором вы хотите использовать эти переменные.

Альтернативой является использование CSS переменных . Вы можете объявить их один раз и повторно использовать без импорта.

styles.s css

: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.s css

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

Демонстрация Stackblitz

Примечание: не будет работать с IE