CODEWITHSUNDEEP
zurb-foundationcompass-sass
Cartucho
Cartucho

Reputation: 3319

How to use Foundation 5 with Compass+SASS?

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.

Upvotes: 9

Views: 22810

Answers (7)

user3257693
user3257693

Reputation: 486

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

Upvotes: 0

Sherif SALEH
Sherif SALEH

Reputation: 97

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";

Upvotes: 1

Thomas_Hoadley
Thomas_Hoadley

Reputation: 178

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/

Upvotes: 0

agon024
agon024

Reputation: 1007

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.

Upvotes: 3

Eric Daams
Eric Daams

Reputation: 1

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.

Upvotes: 0

zechdc
zechdc

Reputation: 3404

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.

Upvotes: 1

Mike Barwick
Mike Barwick

Reputation: 5367

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.

Upvotes: 8

Related Questions