Error when compiling SASS?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
13 views
Hi all, 2 days can't find the problem. Help smart people pliz.

Error code:
gulp-notify: [Error running Gulp] dev\\base\\_sprite.sass
Error: Invalid CSS after "...tesheet-sprites": 1 expected 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/')); // path where to store the picture spriteData.css.pipe(gulp.dest('./dev/base/')); // path where to store the styles }); 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 of the 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: // // // To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: // // CSS // .icon { // display: inline-block; // } // // // HTML // @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)
by | 13 views

1 Answer

0 like 0 dislike
Variable names cannot begin with a number
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
asked Apr 23, 2019 by Meinerdi
0 like 0 dislike
1 answer
asked Apr 13, 2019 by Flixon
110,608 questions
257,186 answers
0 comments
35,405 users