Подключение шрифтов в scss через mixin

643

24 июня 2017, 11:50

Здравствуйте почему у меня не работает вот этот mixin в(scss) вот это mixin что я делаю не так

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
@font-face {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;
}
@if $asset-pipeline == true  {
    src: font-url('#{$file-path}.eot');
    src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), font-url('#{$file-path}.woff') format('woff'), font-url('#{$file-path}.ttf') format('truetype');
}
@else {
    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), url('#{$file-path}.woff') format('woff'), url('#{$file-path}.ttf') format('truetype');
     } 
  }

вот это include (scss)

@include font-face("firaSans", "../fonts/FiraSansRegular/FiraSansRegular");

вот выкидывает gulp такую ошибку **

**Error: no mixin named font-face Backtrace: dev/scss/_misc/_fonts.scss:1 on line 1 of dev/scss/_misc/_fonts.scss

@include font-face("firaSans", "../fonts/FiraSansRegular/FiraSansRegular"); ---------^**

Answer 1

mixin используется для добавления стилей элементу, а @font-face это декларация шрифта в проекте и лежит в корневой вложенности.

Answer 2

Делаете, например, так. В отдельном файле создаете шрифты:

@font-face {
  font-family: "RobotoRegular";
  src : url("../fonts/RobotoRegular/RobotoRegular.ttf");
}

Затем подключаете к основному файлу:

@import "app/sass/fonts.sass";

И потом присваиваете:

h1 {
  font: 14px RobotoRegular;
  color: black;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Окружность с градиентом

Как создать такую окружность, как на рисунке? На рисунке есть ещё задний фонМожно нарисовать круг с градиентом, и с помощью :before закрыть внутреннюю...

313

MySQL