In this article I’m going to show you how to use SASS with the Foundation framework. Since it’s not recommended to edit the massive stylesheet that comes with Foundation, SASS can help greatly with its partial system that will compile your custom style sheet(s) with Foundations into one file. I will talk more about partials and variables in my another post. Visit SASS’s basic page for more information. http://sass-lang.com/guide
Note: This guide is tailored to Mac users.
There are programs out there like CodeKit that can do all this for you, but where’s the fun in that, plus this is free.
The first step is to install Xcode from the App Store. It includes development libraries needed for most of the packages we will install. After it’s installed, open Xcode to accept the license agreement and finish the install.
Homebrew is package manager for OSX similar to macports that comes with OSX; however, Homebrew has a better community with more frequent package updates. Plus, a package will not overwrite a similar native OSX package causing future problems.
Open your terminal and run the following command:
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”
During the install it will ask for your user account password. A prompt will come up asking to install “Xcode-select”, which is the Xcode CLI tools. Click the Install button.
When finished run these commands in the terminal:
brew doctor brew update
Brew doctor scans your homebrew environment for any possible issues before installing a package and brew update refreshes the repository list.
If you get a warning after running brew doctor saying your Xcode-select CLI tools are out of date, you can grab the latest version outside the app store from the link below:
Update Xcode-select and re-run “brew doctor” until you get: “Your system is ready to brew”
The Ruby Version Manager manages multiple installations of Ruby and ruby gemsets. This command installs the manager along with the current version of ruby.
\curl -sSL https://get.rvm.io | bash -s stable --ruby
Run brew doctor again to scan the package system before moving on:
brew doctor brew update
Next we are going to install NodeJS and NPM:
brew install node
Bower is the tool Foundation uses to install or update a Foundation project.
sudo npm install -g bower grunt-cli
Install latest version of Foundation through Ruby:
sudo gem install foundation
Compass is CSS authoring framework that uses SASS to generate your stylesheets manually or in real-time during editing.
sudo gem install compass
Next we are going to create a Foundation project. Change to the directory you want to store your project and run:
foundation new test-project
If you were to open index.html in your new project, you will see no styling at all. That’s because the scss file needs to be compiled into a stylesheet. Change to your project folder and compile:
cd test-project compass compile
You can have compass watch for changes in real-time and it will auto compile your stylesheet when you save a change to your scss files.
Congratulations for taking the first steps in what should make your development life easier.