app.css error when compiled with ruby sass from app.scss

Question

I'm trying to build my project with gulp, and the app.scss file is compiled with ruby sass. The problem is the app.css gets error and cannot be applied to browser.

Error: Invalid CSS after "... floor(math": expected ")", was ".div($grid-gutt..." on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/styles/global/libraries.scss from line 4 of ./src/styles/app.scss

The app.css file after being compiled will have lines of comments like this

/* Error: Invalid CSS after "... floor(math": expected ")", was ".div($grid-gutt..." on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/styles/global/libraries.scss from line 4 of ./src/styles/app.scss ...(there are more)

and the last line of app.css is commented too, it looks like this

/*# sourceMappingURL=data:application/json;...

here is the gulpfile.js

var browserSync  = require('browser-sync');
var sass         = require('gulp-ruby-sass');
var sourcemaps   = require('gulp-sourcemaps');
var handleErrors = require('../util/handleErrors');
var config       = require('../config').sass;
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  return sass(config.entry, config.settings)
     .on('error', handleErrors)
     .pipe(sourcemaps.init())
     .pipe(sourcemaps.write())
     .pipe(autoprefixer({ browsers: ['last 2 version'] }))
     .pipe(gulp.dest(config.dest))
     .pipe(browserSync.reload({stream:true}));
});