Предложение по внедрению Миксина для font-face

[Zobakka]

Источник:

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

Пояснение:

Мне кажется, использовать многочисленные переменные наподобие:

font-family: $Sans-semi-bold;
font-family: $Sans-bold;
font-family: $Sans-extra-bold;

не очень удобно, так как приходится постоянно вспоминать переменные и лазать по файлу, выясняя, что же у нас semi, extra и т.п.

На примере Вашего урока верстка Venev.ru:

получился бы файл fonts.scss:

@include font-face("Source Sans Pro", "../fonts/sourcesanspro-regular", 400, null, ttf woff2 woff);
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-semibold", 600, null, ttf woff2 woff);
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-bold", 700, null, ttf woff2 woff);
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-black", 900, null, ttf woff2 woff);

что срендерится в:

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourcesanspro-regular.ttf") format("truetype"), url("../fonts/sourcesanspro-regular.woff2") format("woff2"), url("../fonts/sourcesanspro-regular.woff") format("woff"); }

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sourcesanspro-semibold.ttf") format("truetype"), url("../fonts/sourcesanspro-semibold.woff2") format("woff2"), url("../fonts/sourcesanspro-semibold.woff") format("woff"); }

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sourcesanspro-bold.ttf") format("truetype"), url("../fonts/sourcesanspro-bold.woff2") format("woff2"), url("../fonts/sourcesanspro-bold.woff") format("woff"); }

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/sourcesanspro-black.ttf") format("truetype"), url("../fonts/sourcesanspro-black.woff2") format("woff2"), url("../fonts/sourcesanspro-black.woff") format("woff"); }

В результате, при использовании одного шрифта Source Sans Pro, как в вышеупомянутом уроке, не надо будет вообще вспоминать конкретную переменную, а указывать только начертание, что просто взять из ФШ, Zeplin или еще откуда-либо:

font-weight: 900;