Error in plugin 'sass' ...seems to be scss file line 1 no matter what

[hellofantastic]

Hello ladies and gentlemen,

I seek your insight.

I am in the process of getting setup with Susy 2 / sass in a node.js/angular setup using gulp via following along on a @zellwk tutorial.

I have latest gulp, gulp-sass and normalize-scss installed through npm.

I have been testing using gulp sass command in terminal

My first error was regarding not being able to find "normalize" so I updated the gulpfile and added a path for includePaths to normalize scss folder.

That error went away and next error was:

Error in plugin 'sass'
Message:
    src/scss/base.scss
Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
        on line 1 of src/scss/base.scss
>> @import "normalize";
   ^
22:09:41] Finished 'sass' after 237 ms

which led me to go through a bunch of dead ends in different github repos issues for gulp-sass, node-sass, libsass.

Then I tried added a comment at the top of this base.scss "//Base" because I see it a top many sample scss files and get the same error but for the comment:

[22:32:05] Starting 'sass'...
Error in plugin 'sass'
Message:
    src/scss/base.scss
Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
        on line 1 of src/scss/base.scss
>> //Base
   ^
[22:32:05] Finished 'sass' after 182 ms

Here is my gulpfile

var gulp = require('gulp');
var sass = require('gulp-sass');

//Sass 
gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss')
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: ['node_modules/susy/sass','node_modules/normalize-scss/sass']
      }).on('error', sass.logError))
      .pipe(gulp.dest('public/assets/css'));
});

base.scss:

//Base
@import "normalize";
@import "susy";

$susy: (
    columns: 12,  // The number of columns in your grid
    gutters: 1/4, // The size of a gutter in relation to a single column
    global-box-sizing: border-box
);
@include border-box-sizing;

// The Container Mixin
@include container( 75em );

Any insight , anything else I can provide?

[hellofantastic]

Further investigation, if I turn my scss into something super simple , the comment isn;t producing error:

//Base
.test{
    width: percentage(5/7);
}

So could this be some kind of gulp-sass/node-sass/libsass config or susy itself that I am unaware of?

Here are my node modules versions of involved pieces:

"normalize-scss": "^6.0.0",
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0",
"susy": "^2.2.12"

[mirisuzanne]

I'm not sure exactly what the question is. If you are asking about how gulp-sass reports errors, and why it is saying "line 1" — that's a question for their github channel, not something we control on our end.

But I do see the likely cause of your error. The container mixin, should be applied to a selector. It will output raw property/value pairs, which are not allowed at the root of the document. The proper use would be something like this:

//Base
@import "normalize";
@import "susy";

$susy: (
    columns: 12,  // The number of columns in your grid
    gutters: 1/4, // The size of a gutter in relation to a single column
    global-box-sizing: border-box
);
@include border-box-sizing;

// The Container Mixin
.container {
  @include container( 75em );
}

Notice the selector around @include container. Hope that helps!

[hellofantastic]

Ohhhhh!? Helps yes.

Okay so that was the Property,mixin includes etc that was out of its place error business...

And because ... your mixin explanation.

Would this fall under Sass basics? Like I should read up on some sass basics before tackling the automation of everything.

Thanks thanks thanks.

[hellofantastic]

haha! Yep ... sass-lang docs @include directive and mixins also answered why @include border-box-sizing; can be at root of document.

[mirisuzanne]

Combination of CSS and Sass basics. Sass features won't make much sense unless you have a background in CSS.

Understanding the output of a given function or mixin is also important. In our case border-box-sizing includes a selector in the output, while most of our other mixins do not.

[mirisuzanne]

Yep, great! Have fun! :)

[masnoonJunaid]

I am facing the same problem for last three days , error message is-$ gulp sass
[16:01:20] Using gulpfile D:\experiment\gulpfile.js
[16:01:20] Starting 'sass'...
Error in plugin "sass"
Message:
sass\styles.sass
Error: Invalid CSS after ".logo_image{": expected "}", was "{"
on line 2 of sass/styles.sass

.logo_image{ {

------------^

[16:01:20] Finished 'sass' after 22 ms

I think main error is- Error in plugin "sass"
while task completed after 22 ms but it doesn't return any CSS file after task completion.****
please help , your few minutes can over our stress. @mirisuzanne

[mirisuzanne]

Again, this is not a Susy error – the error is from Gulp Sass. All I can say from looking at your post is that .logo_image{ { would be invalid CSS/Sass. Why are there nested brackets? Search for that, and you may find the issue.