Sass Styling Basics

Shilpa

Shilpa Rao

28 Jul 2016

Sass Styling Basics

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

Install Sass

SASS version can be checked using command “sass -v”.

Sass to CSS

Watch for Changes

Write your sass and start “watching” your Sass file

Compass for pre-compiling SASS files into CSS

Install Compass

Compass version can be checked using “compass -v”.

Create a new compass project

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.

Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

facebook twitter linkedIn youtube