M
M
Mikhail Gilmutdinov2017-04-21 18:48:45
Sass
Mikhail Gilmutdinov, 2017-04-21 18:48:45

Why is font-face not included in sass when compiling to css with gulp?

I use mixin font face

// =============================================================================
// String Replace
// =============================================================================

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// =============================================================================
// Font Face
// =============================================================================

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?",
    svg: "#" + str-replace($name, " ", "_")
  );

  $formats: (
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    src: $src;
  }
}
@include font-face("Jura-Regular", fonts/Jura-Regular);

Console writes an error
[18:38:16] Using gulpfile D:\www\site\gulpfile.js
[18:38:16] Starting 'sass'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: app\sass\_fonts.sass
Error: Invalid CSS after '...$replace: "") {': expected "}", was "{"
        on line 5 of app/sass/_fonts.sass
>> -replace($string, $search, $replace: "") { {
   ------------------------------------------^

    at options.error (D:\www\site\node_modules\node-sass\lib\index.js:291:26)

I bring TASK GULP SASS
gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
  .pipe(sass())
  .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade:true}))
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({stream: true}))
});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question