A complex lit structure full of machinery, seen from high up

As front-end development becomes more complex, so do the tools to aid it. Sass is currently the most popular CSS preprocessor, a tool designed to extend, accelerate and enhance the creation of site styles. Sass has dependencies on other technologies to make it work correctly, making its installation and setup challenging for beginners… but web development sandboxes such as CodePen have Sass support built in, making the free online service a very useful way to start exploring the tool and its capabilities.

This reading list concentrates on just that, using clear explanations coupled with tutorials and examples. Advanced Sass features such as mixins and functions will also be addressed in the very near future.

Prerequisites: A good understanding of HTML & CSS

Time: 2 hours

  1. Introduction to Preprocessors
  2. Introduction to Sass
  3. Nesting
  4. Extends
  5. Color
  6. Comments & Minification
  7. Partials & @import
  8. Loops

Photograph by Midhras, licensed under Creative Commons