Syntax Error when compiling scss

[gabrielbajada]

Hi Jeremy,

first of all, awesome work. I love this theme and it's the basis for most of the sites I create. Thank you so much for putting it together! I just downloaded it again for a site I'm starting and was really happy to see the new version. I can already see a lot of cool stuff to work with.

I have a little issue though. I'm getting the following error when compiling scss.

error style.scss (Line 13 of _functions.scss: Invalid CSS after "...ules: $modules ": expected "}", was "!global;") Sass::SyntaxError on line 13 of /Volumes/CLIENTS/Emcare/2015/Website/Emcare Pro/Emcare Pro…

It goes on, but I think you get the gist. Any idea what's going on, maybe you can help me get it fixed?

Thanks again, really.

Gabriel

[JeremyEnglert]

Was this using the JointsWP 3 branch?

[gabrielbajada]

I got it off your website.

[JeremyEnglert]

Are you using an old version of Sass?

http://foundation.zurb.com/forum/posts/21411-error-on-update-55

[gabrielbajada]

Erm... good question. I use Scout (current version) though, not Compass. I've been through the link you sent and I'm a little lost.

[gabrielbajada]

I just checked and this is what I got.

Sass 3.4.12 (Selective Steve)

Still getting the same errors.

[mrscharf]

I had some mysterious errors on compile in the past, and found that the version of Foundation you run must be compatible with the compiler you're using. I would recommend trying some older versions of Koala compiler (or another one if you an get older versions). Here are the versions they have released:

https://github.com/oklai/koala/releases

In my case, I had updated my compiler without updating Foundation and compiles were either failing altogether or all the styles were broken in strange ways. It seems that sass updated some things and it took awhile for Foundation to catch up. In Foundation 5.5 they did catch up and the few compilers I use started working correctly again.

As a side note, in JointsWP it looks like Foundation 5.2.1 in the package.json file under dependencies. Since the strange compiling issues weren't fixed by Foundation until v5.5, I changed this to the match the resolutions setting (5.5.1) locally to avoid issues like this.

Hopefully this helps you find a solution to your problem.

[JeremyEnglert]

And that is why I love @mrscharf. 👍

[gabrielbajada]

Thanks @mrscharf, but I'm more of a designer than a developer, so I might not be able to understand all the developer jargon.

Please correct me if I'm wrong, but doesn't JointsWP come with Foundation already installed? In the JointsWP style.css file it states Foundation Version: 5.5.1. Shouldn't that be it?

Usually I just download JointsWP, fire up Scout roll my sleeves up and get started. Is there something I'm missing?

[mrscharf]

Foundation does come in JointsWP. The issue looks like your sass compiler is too new for Foundation 5.2.1. There were breaking changes between Foundation and sass/compass that were fixed in Foundtion 5.5 I believe. So try either updating the foundation in the package.json as described above, or downgrade your sass/compass stack to an older version (Koala v2.0.3 should work, but you might need to go a little older I'm not sure.).

[gabrielbajada]

Again, thank you for replying @mrscharf.

To my knowledge, JointsWP comes with Foundation 5.5.1. That's what it states in the style.css file anyway. Am I right @JeremyEnglert?

[JeremyEnglert]

@gabrielbajada - You are correct, it comes with Foundation 5.5.1. But if you look at your bower.json file (found in the root of the theme), you'll notice it is referencing ~5.2.1 - change that to 5.5.1 and you should be golden.

[gabrielbajada]

Excuse the sheer ignorance, @JeremyEnglert. I'm really sorry for wasting your time with this, but what you're saying is that all I need to do is open the bower.json file and change it? That's what I did and it's still giving me the error.

>>> Change detected at 18:43:33 to: _settings.scss error style.scss (Line 13 of _functions.scss: Invalid CSS after "...ules: $modules ": expected "}", was "!global;") overwrite style.css

Do I need to update it via bower itself?

My apologies again.

Gabriel

[JeremyEnglert]

Looks like the issue is with Scout itself - it's not using the most up-to-date version of Sass.

See the discussion here on the Foundation GitHub page:
foundation/foundation-sites#6137

[JeremyEnglert]

It actually looks like Scout hasn't been updated in over 2 years:
https://github.com/mhs/scout-app/issues/185

[gabrielbajada]

@JeremyEnglert you are a scholar and a gentleman. You too @mrscharf! Thank you both for taking the time to deal with the likes of me!

I downloaded a fresh version of JointsWP and compiled with Koala and things are looking up. Until now I was still using the version that Scout was giving me problems with.

Everything seems fine, except for this error Koala is giving me:

/Users/gabriel/Documents/Jobs/Gabriel Bajada/Website/wordpress v3/Gabriel Bajada/library/scss/style.scss

I have, however, uploaded the site and everything seems to be working just fine. It's just this pesky error's going to drive me crazy.

[JeremyEnglert]

I don't think the whole error came through - I just see a file directory.

[gabrielbajada]

That's all I got.

Gabriel Bajada

---

(+356) 7978 4544 gabrielbajada.com

Download vCard http://www.gabrielbajada.com/gabriel-bajada.vcf. Find me
on Facebook http://facebook.com/gabrielbajada/, Twitter
http://twitter.com/gabrielbajada & LinkedIn
http://mt.linkedin.com/in/gabrielbajada.

[JeremyEnglert]

Hmmmm. Are you sure its just not letting you know where the Sass has compiled? It seems almost like a confirmation message.

[mrscharf]

One other thing I normally have to do in Koala (and other compilers) is set the output directory to the css directory. Seems that by default, the generated css lands in the same folder as the scss files. In Koala this can be done right under the scss filename (it's in light grey).

After changing the Foundation version in the package.json file, run 'bower install' I believe it is. This will update Foundation and all the dependencies. I have little experience with bower, so it might be 'bower update', I'm not sure offhand.

[gabrielbajada]

Thank you @mrscharf, I've already set the output folders.

@JeremyEnglert this is the actual screenshot of the error.

My process is as follows:

1. I add the JointsWP-master folder to Koala.
2. It gives me the error (possibly because it auto compiles scss).
3. I set the output folders.
4. I set the Project Settings (which creates the koala-config.json file)
5. I test by changing something in the _settings.scss file.
6. I get a success pop-up followed by the same error pop-up.
7. I bang my head against the wall.

The output seems fine though. I upload the css file and the changes look like they have been done and I don't see any errors.

[gabrielbajada]

Guys, everything seems to be fine. Thanks so much to the both of you for your time… and @JeremyEnglert, thanks so much for this theme. I learnt so much working with it!

Awesome work!

[mrscharf]

That's great news! Glad we could be of service.

[JeremyEnglert]

@gabrielbajada, glad you got this all figured out! JointsWP 3 will come with Gulp included, which will make compiling Sass and minifying JS even easier.

@mrscharf, I owe you one! 👍

Closing this out.

[gabrielbajada]

Awesome.