010 SASS
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:
- ruby programming language and rubygems
- sass with its detailed documentation
- Google Web Font Quando
- Subtle Pattern background weave
- Lettering.js with jQuery as dependancy
- 3D Text
##Common SASS commands
The following commands are for the command line:
ruby -v
check ruby is installed in your computergem -v
check rubygems is installedgem install sass
to install sasssass --watch style.sass:style.css
watch the .sass continuously compile to .css with with error code where applicablesass --watch style.sass:style.css --style compressed
to compile css into minified version and other stylessass --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
- popularity of css preprocessors
- sass vs. less vs. stylus
- problem with css pre processors
- musings on css pre processor
##Resources on O-Notation
##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]