Skip to content

Instantly share code, notes, and snippets.

@geoom
Created June 7, 2013 13:29
Show Gist options
  • Save geoom/5729264 to your computer and use it in GitHub Desktop.
Save geoom/5729264 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment