Sass stands for Syntactically Awesome Stylesheets, a name that sets really high expectations. It adds missing features to CSS and works as a pre-processor like CoffeeScript works for javascript. Since sass is a superset of CSS, you can start incorporating it into existing CSS stylesheets right away. This blog guides you through the basics of sass styling.
Sass files have a default extension of .scss. A second syntax (.sass) exists, but we’ll focus only on .scss here.
Why Sass?
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:
Install RubyGems
$ sudo apt-get install rubygems # For Ubuntu 14.04 $ sudo apt-get install rubygems-integration
Install Sass
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
Install Compass
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.
Talk to us
