Connecting fonts to scss via mixin

Question

Connecting fonts to scss via mixin

Hello why is this mixin not working for me in (scss) here is this mixin what am I doing wrong

@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');

     } 
  }

Here it is include (scss)

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

Here gulp throws such an error **

**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"); ---------^**

**

1

css scss

Author: brin gonor, 2017-06-22

Source

3 answers

score 2 · Answer 1

Edit your mixin this way and everything will work:

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) {
    @font-face {
        font-family: $font-family;
        font-weight: $weight;
        font-style: $style;
        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');
    }
}

score 1 · Answer 2

Mixin is used to add styles to the element, and @font-face is the font declaration in the project and lies in the root nesting.

1

Author: Artem Gorlachev, 2017-06-22 06:24:55

score 1 · Answer 3

You do, for example, like this. Create fonts in a separate file:

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

Then connect to the main file:

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

And then you assign:

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