Как в Gulp/SASS указать стиль шрифта к элементу @mixin @font-face?

В Gulp.js и SASS вы можете использовать @mixin для определения стиля шрифта в блоке @font-face. Это позволяет вам легко переиспользовать свойства шрифта в разных местах вашего проекта.

Вот пример использования @mixin для стиля шрифта в блоке @font-face:

1. Создайте файл SASS с именем fonts.scss (или любым другим именем, которое вам нравится) и определите в нем @mixin для стиля шрифта:

@mixin font-style($font-family, $font-weight, $font-style, $font-src) {
  @font-face {
    font-family: #{$font-family};
    font-weight: $font-weight;
    font-style: $font-style;
    src: $font-src;
  }
}

2. В вашем основном файле SASS, например, main.scss, импортируйте файл fonts.scss с помощью @import:

@import 'fonts';

3. Используйте @include для вызова @mixin и передайте ему аргументы для настройки стиля шрифта:

@include font-style('Open Sans', 400, normal, url("../fonts/OpenSans-Regular.ttf"));

В этом примере мы передали четыре аргумента в @mixin font-style(): название шрифта ('Open Sans'), толщину шрифта (400), стиль шрифта (normal) и путь к файлу шрифта (url("../fonts/OpenSans-Regular.ttf")).

Вы можете повторить этот шаг с разными аргументами для создания разных стилей шрифтов в разных местах вашего проекта.

После запуска Gulp.js, SASS скомпилирует ваш main.scss в CSS, и в блоке @font-face будут применены определенные вами стили шрифта.