Menu icon Foundation
Installing SASS

I did a complete installation of Foundation 5 (Download Everything) from http://foundation.zurb.com/develop/download.html. This works fine.

I now want to customize using SASS. I followed the recommended installation steps for Git, Node, Ruby on http://foundation.zurb.com/docs/sass.html#cli. I used the default installation options since there were no instructions to the contrary. There must be a problem with directories and/or paths, since I can't run any of the commands (npm install -g bower grunt-cli) from the command window. I created a test directory as recommended in the video http://foundation.zurb.com/learn/video-started-with-foundation.html but neither sudo or npm are recognized.

I could really use some help getting SASS installed and useable.

Sass

I did a complete installation of Foundation 5 (Download Everything) from http://foundation.zurb.com/develop/download.html. This works fine.

I now want to customize using SASS. I followed the recommended installation steps for Git, Node, Ruby on http://foundation.zurb.com/docs/sass.html#cli. I used the default installation options since there were no instructions to the contrary. There must be a problem with directories and/or paths, since I can't run any of the commands (npm install -g bower grunt-cli) from the command window. I created a test directory as recommended in the video http://foundation.zurb.com/learn/video-started-with-foundation.html but neither sudo or npm are recognized.

I could really use some help getting SASS installed and useable.

James Van Waza over 4 years ago

Hi Tom, Open up the command line try and follow this instructions. Once you get errors,kindly take a screenshot of the error from the command line, then I can figure out whats causing the problem

sudo npm install -g bower grunt-cli
sudo gem install foundation
sudo gem install compass
foundation new MY_PROJECT( Insert Name of Project)
cd MY_PROJECT
sudo gem install bundler
bundle (Only Run bundle once)
sudo bundle exec compass watch

Tom Elliott over 4 years ago

I have a screen shot . How do I attach a picture to a reply?

I just says 'sudo' not recognized as an internal or external command, operable program, or batch file

James Van Waza over 4 years ago

Which platform are you using? Windows or Mac ? For the screenshot you can send by email [email protected]

Tom Elliott over 4 years ago

I emailed an update of my progress and a screen shot of my status.

I realized I was not running as root/admin. Retried and got as far as the foundation new step.

James Van Waza over 4 years ago

Ok, check your email and let me know how it goes.

Rafi Benkual over 4 years ago

Permission issues are almost always the culprit. Bower does not work with sudo, so it needs to be run separately without.

You can edit your post and add an image or use a screenshot tool like lightshot that provides a link.

Tom Elliott over 4 years ago

DOH! I just remembered all the PATH settings and such.

Maybe someone can give me a hint on where '""C:\Foundation' came from.

I went through all the steps in Tom's article until Step 16. This failed with this:

Microsoft Windows [Version 6.0.6002]
Copyright (c) 2006 Microsoft Corporation. All rights reserved.

C:\Foundation Tools\TestProject>foundation new project_name --libsass
'""C:\Foundation' is not recognized as an internal or external command,
operable program or batch file.

C:\Foundation Tools\TestProject>

This looks like a script or program is trying to build an executable string from some variables. Could it be the space in the directory name? Can I just rename the directory, or are there stored paths using it?

I'd to have to rebuild from scratch just to check it out.

Tom Elliott over 4 years ago

I went back and rebuilt everything using directories without spaces in the names and it all worked.

Thanks to James, Rafi, and Tom Hogan for help and tutorial.

I suggest that the documentation be updated to warn about the spaces problem. Zurb also might want to investigate other problems with what appears to be using space as a delimiter when parsing. I encountered similar problems decades ago.

James Van Waza over 4 years ago

Ok. Tom, For Windows you could write the steps so other Windows users, it can be simpler for them.

Tom Elliott over 4 years ago

Some hints for Windows users based on my experience on Vista.

I followed Tom Hogan's tutorial at http://foundation.zurb.com/forum/posts/11597-how-to-install-grunt-and-libsass-on-windows I had several problems, some related to the sorry state of my 5-year-old system. I read through to the end before beginning and saw that he mentioned inspecting and editing the SYSTEM PATH. I immediately created a system restore point. and I'm glad I did. Other tools I used were the free versions of Revo Uninstaller and Rapid Environment Editor. I built a separate directory structure as Tom recommended except I named it "Foundation Tools".

Everything seemed to go smoothly until Step 15.

Tom Hogan said create a project directory named "New Project" so I did. The problem seems to be the space in the name. Somewhere in the tools there must be some parsing done that uses space as a delimiter. I kept getting errors such as
'""C:\New" is not a command or can't be found
'""C:\Foundation" is not a command or can't be found

So I uninstalled everything, backed out the PATH changes and went back to Step 1 using "FoundationTools" and "NewProject". Now things work. I've been able to run Compass, change a variable in _settings, have Compass automatically create app.css, and display the sample index,html page with a new color.

I do my testing with WAMP on my local machine. I then created a new project in my wamp\www directory. "http://localhost/SassFoundationSite/" works, too.

So, to summarize:
1. Sytem Restore is your friend.
2. Spaces in directory names are not.
3. Tom Hogan rendered yeoman service with his tutorial. His psychic foresight didn't predict the eccentricities of at least one of his readers, however.

I hope new users will find this information useful.

I wrote the above on a text editor and pasted it here. That must explain the lack of formatting.

Dimosthenis Nikolis almost 3 years ago

Hello boys and girls ta Zurb. I would appreciate a better guide for installation via sass.

 

For example I have a wordpress-ready site and need to install foundation in it. I could not find a simple guide for if and how to use Gruntfile.js (the provided example in the installation page is poor) when using grunt which I'm familiar with.

 

When foundation-sites files where downloaded in node modules I could not figure out which files to import where.

I love foundation and believe it's a great framework but the overall docs are extremely poor

Tom Elliott almost 3 years ago

Sorry, I have no experience with Wordpress.