A
A
andriy-mk2016-10-11 11:09:34
Sass
andriy-mk, 2016-10-11 11:09:34

Compiling sass to css?

Hello, I'm learning to make up from a video lesson,
do everything like there
, everything is fine with the tip, and I have an error when compiling
Error in plugin 'sass'

Message:
    sass\header.sass
Error: Invalid CSS after "      strong, b {} }": expected 1 selector or at-rule, was 'font-family:  "Robo'
        on line 15 of sass/header.sass
>>      strong, b {} }
   ---------------^

gulpfilejs
var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss    = require('gulp-minify-css'),
    rename       = require('gulp-rename'),
    browserSync  = require('browser-sync').create(),
    concat       = require('gulp-concat'),
    uglify       = require('gulp-uglifyjs');

gulp.task('sass', function(){
    return gulp.src('app/sass/**/*.sass') // Берем все sass файлы из папки sass и дочерних, если таковые будут
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
});

gulp.task('browser-sync', ['styles', 'scripts'], function() {
    browserSync.init({
        server: {
            baseDir: "./app"
        },
        notify: false
    });
});

gulp.task('styles', function () {
  return gulp.src('sass/*.sass')
  .pipe(sass({
    includePaths: require('node-bourbon').includePaths
  }).on('error', sass.logError))
  .pipe(rename({suffix: '.min', prefix : ''}))
  .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
  .pipe(minifycss())
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
  return gulp.src([
    './app/libs/modernizr/modernizr.js',
    './app/libs/jquery/jquery-1.11.2.min.js',
    './app/libs/waypoints/waypoints.min.js',
    './app/libs/animate/animate-css.js',
    './app/libs/plugins-scroll/plugins-scroll.js',
    ])
    .pipe(concat('libs.js'))
    // .pipe(uglify()) //Minify libs.js
    .pipe(gulp.dest('./app/js/'));
});

gulp.task('watch', function () {
  gulp.watch('sass/*.sass', ['styles']);
  gulp.watch('app/libs/**/*.js', ['scripts']);
  gulp.watch('app/js/*.js').on("change", browserSync.reload);
  gulp.watch('app/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['browser-sync', 'watch']);

header.sass
@import "bourbon"
@import "vars.sass"

body
  font-size: 15px
  min-width: 320px
  position: relative
  line-height: 1.6
  font-family: "RobotoRegular", sans-serif
  overflow-x: hidden

.hidden
  display: none

  strong, b
font-family:  "RobotoBold", sans-serif 

h1,h2,h3,h4,h5,h6 .button
font-family: "RobotoCondensedBold", sans-serif

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey Ukolov, 2016-10-11
@alexey-m-ukolov

You have a problem with indentation. It should be like this:

.hidden
  display: none

  strong, b
    font-family:  "RobotoBold", sans-serif

S
sergey, 2016-10-11
@zorro76

They wrote to you:

Error: Invalid CSS after "strong, b {} }": expected 1 selector or at-rule

If you don't understand,
then read here

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question