CODEWITHSUNDEEP
csssasszurb-foundation
user_lilem
user_lilem

Reputation: 57

Using compass - css styling not applying foundation.css

Installed Foundation 5 with Sass a couple of days ago. But, after:

files, directories created by watch...

open index.html and there's no styling. (I also tried 'compass compile' and 'compass watch', but no changes.

The config.rb that compass uses shows:

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 = "js"

And the app.scss shows:

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

Looking at stylesheets/app.css it seems that the foundation.css file hasn't been imported.

Any ideas of what's going on? Could be a totally newbie problem...knocked my head against the wall and googled ad nauseam.

Based on a suggestion, I reinstalled compass, but still get the same. Compass seems to be okay when watching:

emily@emily:~/sites/test_grids(master*)$ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
directory stylesheets
write stylesheets/app.css

and when I modify bower_components/foundation/scss/foundation.scss (insert p {font-size: 10rem;} it shows:

modified bower_components/foundation/scss/foundation.scss
write stylesheets/app.css

The refreshed index.html font size changes, but again, no foundation.css styling.

Upvotes: 1

Views: 994

Answers (3)

Mano Bharathi
Mano Bharathi

Reputation: 21

Try this out:

sudo gem uninstall compass 1.0.0

sudo gem uninstall sass 3.4.0

sudo gem install sass --version 3.2.9

sudo gem install compass --version 0.12.7

This method worked for me

Upvotes: 0

Rhian Thomas
Rhian Thomas

Reputation: 86

I was having this problem too and found the answer here:

https://stackoverflow.com/a/25560150/3990944

The latests Sass and Compass are not compatible. Try uninstalling and installing older versions. Worked for me. Details are in the post above.

Upvotes: 2

rafibomb
rafibomb

Reputation: 535

You want to make changes in the _settings.scss or app.scss, not the files located in Bower components. See file descriptions here:

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

How to use http://foundation.zurb.com/docs/using-sass.html

Upvotes: 0

Related Questions