使用Compass的Foundation 5的SASS / CSS问题

Question

I'm having a problem with Foundation 5's recommended SASS installation.

http://foundation.zurb.com/docs/sass.html

I followed the brief tutorial only a week or so ago and had no problems. Everything seemed to run OK and looked OK.

Over the course of the next few days I was making amendments to the project I am working on but only put the changes (CSS) into a custom.css file. I was wanting to ensure my client was happy with my proposed design before getting into the guts of SASS.

This evening I came to make the changes to SASS. I ran compass watch before I made any changes and I was immediately met with:

write stylesheets/app.css

This totally screwed up my index.html despite not having made any changes. The app.css file is only a fraction of the original size (~750 lines vs. ~8,500) and as a result the page is pretty much loading as raw HTML with no useful CSS - there's not even a hint of any styling on body for example.

After deciding to re-install from scratch I'm still no better off and running into very much the same issue.

According to Foundation:

app.scss Here you can determine what stylings will be in your project. By default all of Foundation is imported , but you can deactivate and select specific components you want to import or add your custom Sass here.

When I first installed Foundation, it was all imported as the default styles loaded for my index.html . It was acting how Zurb described it would. Now it only seems to grab some default styles but not the whole thing and I can't for the life of me figure out why.

Update: A friend cloned my repo and had no issues whatsoever. I've done the same and ran into the same issue again - must be something to do with my environment.

Further update: compass watch is only compiling two of the Foundation files, _icon-bar.scss and _visibility.scss . It seems to be pulling completely arbitrary lines even within those files, so something in them is not right either. It does not pull anything from anywhere else. There's a couple of pastebin links in the comments on the answer below.

I would greatly appreciate any assistance with this.

Thanks for taking the time to read.

Answer 1

I'm just learning Foundation 5 with Sass but your issue and the CSS output is looking how mine was compiling out as well, with lot's of comments and no CSS being pulled into the HTML..

This thread on the Foundation Forums really helped me. Seems like the latest Sass and Compass wasn't working properly?? Not sure the details but the suggestion from Szabesz to uninstall the latest Sass and Compass and install slightly older ones worked:

to uninstall:
sudo gem uninstall compass 1.0.0
sudo gem uninstall sass 3.4.0

to reinstall old versions:
sudo gem install sass --version 3.2.9
sudo gem install compass --version 0.12.7

Answer 2

What's in app.scss what ever is listed in there will be output as css in app.css.

@import "settings" @import "foundation"

Is the default.