Всем привет, 2 дня не могу найти проблему. Помогите умные люди плиз.
Код ошибки:
gulp-notify: [Error running Gulp] dev\base\_sprite.sass
Error: Invalid CSS after "...tesheet-sprites": expected 1 selector or at-rule, was "$1-name: '1';"
on line 1 of dev/base/_sprite.sass
from line 6 of dev/main.sass
>> // SASS variables are information about icon's compiled state, stored under
^var gulp = require('gulp'),
gutil = require('gulp-util' ),
pug = require('gulp-pug'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
browsersync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cleancss = require('gulp-clean-css'),
rename = require('gulp-rename'),
autoprefixer = require('gulp-autoprefixer'),
notify = require("gulp-notify"),
rsync = require('gulp-rsync'),
spritesmith = require('gulp.spritesmith');
gulp.task('pug', function buildHTML() {
return gulp.src(['dev/*.pug', 'dev/page/*.pug'])
.pipe(plumber({
errorHandler: notify.onError(function(err){
return {
title: 'Pug',
message: err.message
}
})
}))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('app/'))
.pipe(browsersync.reload( {stream: true} ))
});
gulp.task('sass', function() {
return gulp.src('dev/*.sass')
.pipe(sass({ outputStyle: 'expand' }).on("error", notify.onError()))
.pipe(rename({ suffix: '.min', prefix : '' }))
.pipe(autoprefixer(['last 15 versions']))
//.pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
.pipe(gulp.dest('app/css/'))
.pipe(browsersync.reload( {stream: true} ))
});
gulp.task('js', function() {
return gulp.src([
'dev/_libs/jquery/dist/jquery.min.js',
'dev/common.js', // Always at the end
])
.pipe(concat('scripts.min.js'))
.pipe(uglify()) // Mifify js (opt.)
.pipe(gulp.dest('app/js'))
.pipe(browsersync.reload({ stream: true }))
});
gulp.task('sprite', function () {
var spriteData = gulp.src('app/img/icon-png/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.sass'
}));
spriteData.img.pipe(gulp.dest('./app/img/sprite/')); // путь, куда сохраняем картинку
spriteData.css.pipe(gulp.dest('./dev/base/')); // путь, куда сохраняем стили
});
gulp.task('watch', ['pug', 'sass', 'js', 'browser-sync', 'sprite'], function() {
gulp.watch(['dev/**/*.pug'], ['pug']);
gulp.watch(['dev/**/**/*.sass'], ['sass']);
gulp.watch(['dev/*.js'], ['js'])
});
gulp.task('browser-sync', function() {
browsersync({
server: {
baseDir: 'app'
},
notify: false,
// open: false,
// tunnel: true,
// tunnel: "projectmane", //Demonstration page: http://projectmane.localtunnel.me
})
});
gulp.task('rsync', function() {
return gulp.src('app/**')
.pipe(rsync({
root: 'app/',
hostname: 'username@yousite.com',
destination: 'yousite/public_html/',
// include: ['*.htaccess'], // Includes files to deploy
exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
recursive: true,
archive: true,
silent: false,
compress: true
}))
});
gulp.task('default', ['watch']);
main.sass// ---------------- Base ------------------- //
@import "base/fonts"
@import "base/vars"
@import "base/libs"
@import "base/sprite"
::placeholder
color: #666
::selection
background-color: $accent
color: #fff
html, body
height: 100%
body
font-size: 10px
min-width: 320px
position: relative
line-height: 1.65
font-family: $default-font
overflow-x: hidden
input, textarea
border: #666 1px solid
outline: none
&:focus:required:invalid
border-color: red
&:required:valid
border-color: green
// ---------------- Base ------------------- //
// ---------------- Blocks ----------------- //
//@import "page/page"
// ---------------- Blocks ----------------- //
@import "base/media" // Always at the end
_sprite.sass// SASS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home
// width: $icon-home-width
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites
$1-name: '1'
$1-x: 0px
$1-y: 0px
$1-offset-x: 0px
$1-offset-y: 0px
$1-width: 50px
$1-height: 105px
$1-total-width: 206px
$1-total-height: 105px
$1-image: 'sprite.png'
$1: (0px, 0px, 0px, 0px, 50px, 105px, 206px, 105px, 'sprite.png', '1', )
$2-name: '2'
$2-x: 50px
$2-y: 0px
$2-offset-x: -50px
$2-offset-y: 0px
$2-width: 52px
$2-height: 100px
$2-total-width: 206px
$2-total-height: 105px
$2-image: 'sprite.png'
$2: (50px, 0px, -50px, 0px, 52px, 100px, 206px, 105px, 'sprite.png', '2', )
$3-name: '3'
$3-x: 102px
$3-y: 0px
$3-offset-x: -102px
$3-offset-y: 0px
$3-width: 52px
$3-height: 100px
$3-total-width: 206px
$3-total-height: 105px
$3-image: 'sprite.png'
$3: (102px, 0px, -102px, 0px, 52px, 100px, 206px, 105px, 'sprite.png', '3', )
$4-name: '4'
$4-x: 154px
$4-y: 0px
$4-offset-x: -154px
$4-offset-y: 0px
$4-width: 52px
$4-height: 100px
$4-total-width: 206px
$4-total-height: 105px
$4-image: 'sprite.png'
$4: (154px, 0px, -154px, 0px, 52px, 100px, 206px, 105px, 'sprite.png', '4', )
$spritesheet-width: 206px
$spritesheet-height: 105px
$spritesheet-image: 'sprite.png'
$spritesheet-sprites: ($1, $2, $3, $4, )
$spritesheet: (206px, 105px, 'sprite.png', $spritesheet-sprites, )
// The provided mixins are intended to be used with the array-like variables
//
// .icon-home
// @include sprite-width($icon-home)
//
// .icon-email
// @include sprite($icon-email)
//
// Example usage in HTML:
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// // CSS
// .icon {
// display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite)
width: nth($sprite, 5)
@mixin sprite-height($sprite)
height: nth($sprite, 6)
@mixin sprite-position($sprite)
$sprite-offset-x: nth($sprite, 3)
$sprite-offset-y: nth($sprite, 4)
background-position: $sprite-offset-x $sprite-offset-y
@mixin sprite-image($sprite)
$sprite-image: nth($sprite, 9)
background-image: url(#{$sprite-image})
@mixin sprite($sprite)
@include sprite-image($sprite)
@include sprite-position($sprite)
@include sprite-width($sprite)
@include sprite-height($sprite)
// The `sprites` mixin generates identical output to the CSS template
// but can be overridden inside of SASS
//
// @include sprites($spritesheet-sprites)
@mixin sprites($sprites)
@each $sprite in $sprites
$sprite-name: nth($sprite, 10)
.#{$sprite-name}
@include sprite($sprite)
Простой
