Sass – Happy styling - Part 1 - HashedIn Technologies

Sass – Happy styling - Part 1

Technology - 28 Jul 2016
Sampath K
  • Created by Hampton Catlin
  • Primary developers: Nathan Weizenbaum & Chris Eppstein
  • Baked into Rails

Enter Sass

  • Syntactically Awesome Stylesheets.
  • Looks like CSS, but adds features to combat shortcomings.
  • Preprocessor to css, like CoffeeScript to javascript, but here all css are valid sass (but all javascripts are not valid coffeescript).
  • Sassy CSS (.scss) is the default file extension.
  • Since CSS doubles as valid SCSS, try writing styles normally and slowly incorporate new techniques.
  • 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 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:

Free tag for commerce

E-book on Digital Business Transformation