This post aim to be a memo for beginners who wants to start using Sass, Compass and Foundation

Definitions

  • Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more
  • Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. For example it provide some mixin for all css3 attribute
  • Foundation is the most advanced, responsive front-end framework in the world. The framework is mobile friendly and ready for you to customize it any way you want to use it.

Where to start

Firstly I recommend you to read the Sass Basic and after you can read this introduction to Sass and Compass

As reference API I recommend you the Sass function API and the Compass reference especially the Compass mixin reference which is very complete and useful.

Using Foundation with Sass and Compass is well explained in the Foundation Getting Started With Sass page, as a reference API to Foundation I recommend you the Foundation documentation

Setting up a working environement

Install all required components: -indeed you need to install ruby, gem and npm before-

$ gem install sass compass foundation
$ npm install -g bower grunt-cli

Updating all components -not needed on fresh install indeed-:

$ gem update sass compass foundation
$ npm update bower grunt-cli

Starting a new projet:

$ foundation new new-project-name

This will create a new directory new-project-name with all required files, fell free to replace new-project-name with your project name indeed ;-)

As I’m a python dev I prefer the sass syntax, apply the change as mention in config.rb to enable it.

Now cd to new-project-name -or whatever your project name is- and run:

$ bundle  # (only once per project)
$ bundle exec compass watch

every change you made on .sass files will automaticaly be compiled to css

… more coming soon