How to use Foundation 5 with Compass+SASS?

Question

The problem

Foundation 5 was released last week, that's great, but the new version requires to use bower for using F5 with SASS and the official documentation seems to be a bit incomplete and immature.

I'm trying to create a project using the steps proposed by the docs:

[sudo] npm install -g bower

and then

gem install foundation

No problems here. The problem is when creating a Compass project:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

After Compass compilation, I get the following error:

directory stylesheets/ 
    error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
  /home/cartucho/MY_PROJECT/scss
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  /home/cartucho/MY_PROJECT/bower_components/foundation/scss
  Compass::SpriteImporter)
   create stylesheets/app.css 

Compass config file (config.rb):

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

The SASS file (app.sass):

@import "settings";
@import "foundation";
...

The problem seems to be in config.rb:

add_import_path "bower_components/foundation/scss"

because Compass fail trying to import the files settings and foundation but I don't know how to fix it. Any help will be highly appreciated.

Thanks.

Answer 1

You need to change the line foundation new MY_PROJECT by replacing MY_PROJECT with the folder you want to install the project on. After that, confirm that these folders exist on the directory you specified above - "bower_components/foundation/scss"

When starting a project run compass init and then compass watch (in Terminal) to watch for changes on the .sass files.

Personally, I don't go that route and use http://koala-app.com/ to convert or "compile" my Sass. It's FREE and awesome.

Answer 2

This is SASS were talking about. Please correct me if i'm wrong but you don't need the underscore when importing an "include" file. I create separate sass files for my variables and my mix-ins. They are prefixed with and underscore which signifies an "include" file. SASS recognizes @import "variables"; as @import "_variables.scss". So to be clear when it is an include file just the name of the sass file is need not the _ or the scss extension.

I have never put an underscore before any include file that I have named _filename.scss.

There is probably another issue going on. Possibly with the install and the paths for bower. For those who did add the underscore in the past and it worked...well you just bypass what could become a deeper issue down the road. You need to check your install.

Answer 3

In your app.sass file change the following line

@import "settings";

To

@import "_settings";

Explaination

When you run compass watch you got the error

error scss/app.scss (Line 1: File to import not found or unreadable: settings.

This just means it can't find the settings file being imported. By adding the underscore to the settings file you have specified the correct file path. If you receive any other errors like this, make sure the file path is correct.

Answer 4

I think I had the same error; finally I found in the _settings.scss

You need to underscore before the importing the functions

Before:

// Uncomment to use rem-calc() in your settings
@import "foundation/functions";

After:

// Uncomment to use rem-calc() in your settings
@import "foundation/_functions";

Also you would need to import the settings same way.

In my example I made style.scss and import all the SCSS inside :

@import "foundation/_settings",  "_normalize", "_foundation";

Answer 5

I encountered this same issue, but for me the solution was to change the import of settings in app.scss from:

@import "settings";

To:

@import "foundation/_settings";

Once you've done that, run compass watch again.

Answer 6

You can install Grunt into your project which uses compass's watch function and then some other clever stuff to compile your sass and livereload it in the browser! Here's a great tutorial on how to get it up and running! (it's as simple as creating two new files in the root of your project and then running a few commands from your command line! I seriously advise it!)

http://moduscreate.com/get-up-and-running-with-grunt-js/

Answer 7

I had the same problem. For Ubuntu 14.04 users make sure nodejs and Bower are working properly. You can follow these instructions here http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283