010 SASS

10 Aug 2012

SASS is a CSS pre-processor that makes authoring styles for our project very modular, readable, fast to change styles and tonnes of fun! While creating our SASS project, we will also learn about O-Notation - a fast way to measure efficiency in algorithms.

Download video: mp4

Sample code: Github

Version: 3.1.20

Similar episodes: 004 GIT, 007 Web Fonts, 009 Package Managers

##Tools used to create the episode project:

1. ruby programming language and rubygems
2. sass with its detailed documentation
3. Google Web Font Quando
4. Subtle Pattern background weave
5. Lettering.js with jQuery as dependancy
6. 3D Text

##Common SASS commands

The following commands are for the command line:

• ruby -v check ruby is installed in your computer
• gem -v check rubygems is installed
• gem install sass to install sass
• sass --watch style.sass:style.css watch the .sass continuously compile to .css with with error code where applicable
• sass --watch style.sass:style.css --style compressed to compile css into minified version and other styles
• sass --help for help commands

The following are stuff to play with when authoring sass:

• variables
• nesting
• mixin
• for loop

##Resources on other CSS Pre-Processors

• Different CSS pre processors
  1. sass
  2. less
  3. stylus
• popularity of css preprocessors
• sass vs. less vs. stylus
• problem with css pre processors
• musings on css pre processor

##Resources on O-Notation

• wikipedia and a summary table
• different algorithmic orders and big o-values
• O-notation and graphs

##Build Link of this Episode

Lea Verou’s CSS3 Tools has a list of very useful CSS3 reference apps handcrafted by Lea Verou herself [twitter]