What would cause a sass file to break compilation due to a line break?

Question

I have a sass file: sitemap.scss

It contains only the following (for now):

.hero {
    height: 600px;
    background: none;
}

I'm using gulp-sass which has, up until now, compiled my sass perfectly fine.

The output error when compiling this file reads as such:

Error in plugin 'gulp-sass'
Message:
    assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

Details:
    formatted: Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

    column: 8
    line: 1
    file: /Users/dvasquez/Sites/workspace/Development/branch3/site.com/assets/styles/source/components/sub-pages/sitemap.scss
    status: 1
    messageFormatted: assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

    messageOriginal: Invalid CSS after ".hero {": expected "}", was "{"
    relativePath: assets/styles/source/components/sub-pages/sitemap.scss

Now here's where it gets odd. If I take that same sass file, and write it like this:

.hero { height: 600px; background: none; }

It compiles just fine.

I assumed this might be an encoding issue of some sort, so I deleted the file and created a fresh one. Same issue. Has anyone encountered anything like this before? I have many other sass files in my project and none of them exhibit this behavior.

Also, in addition to this, I also tried importing a partial which included the 4-line version of the file and that worked just fine as well.

Any ideas would be greatly appreciated.

Have you tried deleting the line and re-typing it (not cut/paste style)? The error messages seems to indicated that there are two `{` in the line. You could use a hex editor to check for any unusual characters. — kicken, Jun 25 '16 at 02:42
Sounds like you're compiling indented SASS and not SCSS. SASS doesn't use brackets but instead uses indents, so when you include the brackets, it's adding a second bracket and throwing the error. When you put it on one line, it's recognizing it as standard CSS. Check your gulp settings and see if you have indented sass set to true. — rachel, Jun 25 '16 at 03:33
Kicken, I've gone so far as to delete the entire file, but yes I've tested by deleting the line and rewriting it. Same error. Rachel, thanks for the suggestion, but I imagine if it was compiling indented SASS then all of my other scss files would be failing massively. Everything else compiles just fine (we're talking 50-100 other scss files with hundreds of lines of code). I will try your suggestion on Monday, though, just in case. It's really confounding. I've never experienced this type of issue before. — David Vasquez, Jun 26 '16 at 04:38

score 2 · Answer 1 · edited Sep 29 '16 at 19:20

2

As mentioned in @rachel's comment above, try setting indentedSyntax: false in your gulp-sass configuration. I had the exact same errors and this worked for me!

"sass": {
  "indentedSyntax": false, //Set to false to allow standard SCSS syntax using braces.
  "includePaths": [
    "./node_modules/normalize.css"
  ]
}

edited Sep 29 '16 at 19:20

Scott Weldon

9,673
6
48
67

answered Sep 29 '16 at 16:25

Grant Norwood

23
6

score 0 · Answer 2 · answered Jan 16 '20 at 04:12

Laravel Mix

To expand on Grant K Norwood's answer, if you're using Laravel mix, you'll want to pass the indented style in as a property of the third parameter, like so:

mix.sass('input.sass', 'output.css', {
    sassOptions: {
        indentedSyntax: false
    }
});

docs: https://laravel.com/docs/6.x/mix#sass

What would cause a sass file to break compilation due to a line break?

2 Answers2