jcanfield
6/7/2013 - 1:29 PM

basic commands for using sass and compass (tested in debian)

basic commands for using sass and compass (tested in debian)

/* -----------------------------------------
   Install Ruby and RubyGems in Debian
----------------------------------------- */

$ sudo apt-get install ruby1.9.1
$ sudo apt-get install rubygems

/* -----------------------------------------
   Using Saas
----------------------------------------- */

gem install sass // install sass
sass input.scss output.css // compile input.scss file to output.css file, also you use .sass instead of .scss
sass-convert --from css --to scss --recursive <path> // convert input.css file to output.scss file, also you can convert to sass (-- to sass)
sass --watch <sass_folder>:<css_folder> // make sass watch for changes to our .scss files

/* -----------------------------------------
   Using Compass
----------------------------------------- */

gem install compass // install compass
compass create <project-name> // create a new project in compass (standalone style)
compass compile // compile all .scss files or .sass files (from the directory of your config.rb file)
compass watch // watch for changes (from the directory of your config.rb file)

/* -----------------------------------------
   Using Foundation framework (see more in http://foundation.zurb.com/docs/sass.html)
----------------------------------------- */

gem install zurb-foundation // install foundation
gem update zurb-foundation // upgrading foundation
compass create <project-name> -r zurb-foundation --using foundation // create a new project using foundation (needs compass gem installed) and that is all

/* -----------------------------------------
   Using extensions
----------------------------------------- */

gem install compass-960-plugin // install extension
require 'ninesixty'  // in config.rb file we specified that we going to use the extension
@import "compass/reset","960/grid"; // and ready, we can now to use the extension's libraries
@include grid-system-complete(16); // and to use all components as this mixin