Menu icon Foundation
SCSS compiles but resulting CSS-file incomplete

Hi!

I have a problem which is leaving me baffled. Everything was working fine and things went haywire suddenly today.

The problem is that after compiling the SCSS-files, the resulting app.css is missing a lot of stuff. For example, the fonts haven't been set at all.

What is and is not found in the resulting app.css:
- Stuff from _icon-bar.scss, _visibility.scss, app.scss is there.
- Everything else is missing

What I've done:
- I've edited settings such as $base-font-family etc. in the _settings.scss.
- I've checked with @debug that _settings.scss, _global.scss etc. are being compiled.
- I'm using Compass for compiling
- Tried cleaning up compile cache and deleteing css files.
- Tried creating a new foundation project with Foundation CLI. Same result.
- Checked a couple of scss files that $body-font-family was set and had the correct value along the way during compiling with @debug "Body font:" $body-font-family;
- Some stuff came up in the CSS (multiple times) when I removed @include exports("global") in _global.scss. Obviously that's not a viable solution. It might point to where the problem may lay, but I have no idea what it might be.

Other info:
- Windows 8.1
- Foundation version 5.3.3
- Compass 1.0.0
- Ruby 2.0

Hopefully, I'm doing something very obvious and stupid. I've done a couple of projects with foundation, so I'm not very familiar with it. This problem is driving me nuts and has been consuming a lot time.

I've pretty much never asked a question on a forum so please bear with me if the question is lacking vital information.

Thanks in advance for any insight you might be able to provide.

Beginning of app.scss

@import "config/variables";
@import "config/colors";
@import "config/settings";

@import "foundation";

@import "site/structure";

@import 'compass';
@import 'modular-scale';



            

         

Beginning of _settings.scss

$rem-base: 16px;

@import "foundation/functions";

$base-font-size: 14px;
$rem-base:  $base-font-size;
$base-line-height: 21px;

$include-html-classes: true;
$include-html-global-classes: $include-html-classes;

$row-width: rem-calc(950);

$body-bg: #fcfcfc;
$body-font-color: #666666;
$body-font-family: "museo-sans",sans-serif;
$font-weight-normal:100;
$body-font-weight: $font-weight-normal;          

         

scsscompilingsettings

Hi!

I have a problem which is leaving me baffled. Everything was working fine and things went haywire suddenly today.

The problem is that after compiling the SCSS-files, the resulting app.css is missing a lot of stuff. For example, the fonts haven't been set at all.

What is and is not found in the resulting app.css:
- Stuff from _icon-bar.scss, _visibility.scss, app.scss is there.
- Everything else is missing

What I've done:
- I've edited settings such as $base-font-family etc. in the _settings.scss.
- I've checked with @debug that _settings.scss, _global.scss etc. are being compiled.
- I'm using Compass for compiling
- Tried cleaning up compile cache and deleteing css files.
- Tried creating a new foundation project with Foundation CLI. Same result.
- Checked a couple of scss files that $body-font-family was set and had the correct value along the way during compiling with @debug "Body font:" $body-font-family;
- Some stuff came up in the CSS (multiple times) when I removed @include exports("global") in _global.scss. Obviously that's not a viable solution. It might point to where the problem may lay, but I have no idea what it might be.

Other info:
- Windows 8.1
- Foundation version 5.3.3
- Compass 1.0.0
- Ruby 2.0

Hopefully, I'm doing something very obvious and stupid. I've done a couple of projects with foundation, so I'm not very familiar with it. This problem is driving me nuts and has been consuming a lot time.

I've pretty much never asked a question on a forum so please bear with me if the question is lacking vital information.

Thanks in advance for any insight you might be able to provide.

Beginning of app.scss

@import "config/variables";
@import "config/colors";
@import "config/settings";

@import "foundation";

@import "site/structure";

@import 'compass';
@import 'modular-scale';



            

         

Beginning of _settings.scss

$rem-base: 16px;

@import "foundation/functions";

$base-font-size: 14px;
$rem-base:  $base-font-size;
$base-line-height: 21px;

$include-html-classes: true;
$include-html-global-classes: $include-html-classes;

$row-width: rem-calc(950);

$body-bg: #fcfcfc;
$body-font-color: #666666;
$body-font-family: "museo-sans",sans-serif;
$font-weight-normal:100;
$body-font-weight: $font-weight-normal;          

         
Andrew about 4 years ago

Same problem... i just updated my gems though so i was thinking this could be the issue?!

Andrew about 4 years ago

Its only today that i've run into this problem, the same compass watch yesterday was working fine.
super strange.

Ben Hutchings about 4 years ago

Hi, sorry to not have a solution for you here, just a "me too".

I've not had this in the past, but today I'm also finding that complied CSS has very little in it.
All I've changed is css_dir = "css" in config.rb.

I'm on OSx 10.8.5, Foundation 5.3.3, Compass 1.0.0 Bower 1.3.8, ruby 2.0.0 (I think, Ruby confuses me so, but thats what RVM reports)

Ben Hutchings about 4 years ago

Hi, for me rolling back to Compass 0.12.7 and SASS 3.2.9 fixed things.

gem uninstall compass 1.0.0
gem uninstall sass 3.4.0

Andrew about 4 years ago

ok this worked for me too - i wish things would be simpler!

Juhana about 4 years ago

Yes! That did it. Thanks! You're a life saver.

To install version 0.12.7 after uninstalling, type:

 gem install compass --version 0.12.7

David Martin about 4 years ago

Perfect! I had the exact same issue only I was an idiot and scoured Google for hours before just checking the forums. Thanks guys!

Szabesz about 4 years ago

Thank you, you saved the day! I spent a lot of time setting up my Mac so that I can compile my very first sass files, just to find that the css files are incomplete. Grrr…

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

Thanks again for the solution!

Julian Ćwirko about 4 years ago

..any news about Sass 3.4 and Compass 1.0 proper support?

Rob De Vries about 4 years ago

this --issue-- just cost me 2 day's of my life.
great framework, but this is so essential, strange this is not noted in the docs.

Andrea about 4 years ago

This issue made me grow another new gray hair!
Instead of finishing my job I lost 4 hours on resolving this issue: rolling back to previous version of compass and sass will make it work again.

Hope properly support will come soon, and will work without bugs.

Scott Rod about 4 years ago

Just updated Compass to stable v1.01 and it no longer imports Foundation's components. I also created a brand new Foundation project to be sure it wasn't me. Unfortunately, I received the same ill result. BROKEN!

I really need source maps, so reverting back to Compass v.12.7 would just suck.

Prior to installing Compass 1.0.1, I was using Compass pre-release 1.0.0.rc.1 with source maps active.

In order to get Compass source maps back with Foundation working, I uninstalled Compass 1.0.1 and its dependencies.
sudo gem uninstall compass

Then, I installed Compass RC version:
sudo gem install compass --version 1.0.0.rc.1

I uninstalled the latest Sass version 3.4.x and dependencies.
sudo gem uninstall sass

Then, I installed the last Sass version working with Compass RC
sudo gem install sass --version 3.3.14

Foundation is being imported with source maps rendering.

Joshua Wayne about 4 years ago

Thank you, thank you, thank you! Finding this just saved me from the hours I spent yesterday failing to fix this issue. It's not often I run across a question in a forum that has the answer I need. There are usually a few strikes. I really appreciate all of the feed back. You guys Rock!

Aaron Dalley about 4 years ago

Wow... I was about to go crazy! I was following the install instructions precisely, and still having this same problem. Thank you for the solution!!!

Foundation docs need to be updated.

Trayy Dee about 4 years ago

Yes!!

It looks like at the moment Foundation does not work properly with SASS 3.4.x if you guys downgrade to version 3.x.x it should work! I believe that this is an issue not Compass.

Alberto Varela about 4 years ago

The same thing happened to me. Downgrading SASS and COMPASS, like @Szabesz said, has resolved my problem.

This happened to me at work where I'm using Mac, but yesterday I upgraded COMPASS at home (where I use Ubuntu) and it worked fine. Maybe the new COMPASS has some kind of incompatibilty or bug?

In spite of it, it seems a problem with the export mixin, beacuse only files without this mixin where included in app.css:

@mixin exports($name) {
  @if (index($modules, $name) == false) {
    $modules: append($modules, $name);
    @content;
  }
}

There is another post talking about this:
http://foundation.zurb.com/forum/posts/18898-why-global-styles-are-not-included

I hope it will be solved soon.

Greetings.

Rafi Benkual about 4 years ago

You should run 'bower cache clean' then you will get the latest version. We are pushing a patch today to reduce this caching problem.

Rafi Benkual almost 4 years ago

We had to make some changes to the Command to create a new project and process for updating for 5.4.5/ In 5.4.4 you will not have any issues.

More info here:
http://foundation.zurb.com/docs/changelog.html

New commands if you are on Sass 3.4 and Compass 1.0 are:
Before running Compass watch, run 'bundle' **only once per project
then to compile - 'bundle exec compass watch'

This is so you dont have to downgrade Sass versions

To know what Sass version you have
Sass -v
compass -v

JeRoe almost 4 years ago

Using Debian Jessie, F5.4.0 works,
but bundle - or bundle exec compass watch was not found!

Peter W almost 4 years ago

@Rafi: Do I understand this right, that bower has been ditched in favor of bundler?
If so, you may want to update the documentation of the install process where it still asks to install bower.

@JoRoe: I haven't tried it yet but a

 sudo apt-get install bundler

may fix your problem.