Sass files have a default extension of .scss. A second syntax (.sass) exists, but we’ll focus only on .scss here.
Ever needed to change, say, a color in your stylesheet, and found that you had to find and replace the value in multiple places. Or how about repeated blocks of styles that are used in various locations throughout the stylesheet? Sass makes it easier.
Installing SASS and Compass
Follow steps below for installing SASS:
$ sudo apt-get install rubygems # For Ubuntu 14.04 $ sudo apt-get install rubygems-integration
SASS version can be checked using command “sass -v”.
$ sudo gem install sass
Sass to CSS
$ mkdir sass-test $ cd sass-test $ touch test.scss test.css
Watch for Changes
Write your sass and start “watching” your Sass file
sass-test$ sass –watch test.scss:test.css
Compass for pre-compiling SASS files into CSS
Compass version can be checked using “compass -v”.
$ sudo gem install compass.
Create a new compass project
$ compass create my-compass-project $ cd my-compass-project $ ls -a>> ...config.rb sass stylesheets
These are all the resources we need for Compass to work. The sass folder contains all of your .scss files, which compile down to the .css files in the stylesheets folder. We’ll just need to start watching the Compass project, then we’ll be ready to roll. (You can change default settings in config.rb)
Watching Compass Project
Start watching your Compass project with this command:
my-compass-project$ compass watch >> Compass is watching for changes. Press Ctrl-C to Stop.