The Sass CSS Preprocessor

1-day CSS course in using the SASS pre-processor — CSS3-07

SASS TrainingCourse Overview

This advanced CSS course enables students to comfortably manage the CSS code bases found in responsive web design and CSS grid systems on larger and/or more complex web sites — using the Sass CSS preprocessor.

The primary focus of this CSS course is on writing less, but better, CSS code using SASS.

The secondary focus of this SASS course is on using the preprocessor with other web design tools, such as grid frameworks and mixin libraries.

To this end, the course includes a mandatory module on using the Compass and Bourbon mixin libraries, plus an optional module on customising Bootstrap 3 with SASS.

Please note that this course can be configured in two different ways. The public version of this SASS training typically includes the installation module and excludes the Bootstrap module. Whereas the private version often does the reverse. Neither configuration is set in stone. Private configurations are are completely flexible. Whereas public versions will only include the Bootstrap component if at least 2 full-fee paying delegates ask us to do so, with at least 8 weeks notice.

SASS TrainingCourse Contents

Install, set-up and get started

  • Understand what SASS does for you
  • Relationship to Compass, Bourbon, Bootstrap, Foundation, etc
  • Install SASS with the Scout GUI
  • Install and test SASS (CLI)
  • Install and test Compass (CLI)
  • Understand the Compass project folder
  • Install and test Bourbon (CLI)
  • Exercises

Basic SASS

  • Understand the SASS process
  • Modularising and re-using CSS
    • With SCSS syntax, nesting, etc
    • With partial files
  • Basic SASS usage and SCSS syntax
  • Commenting SASS code
  • Scoping with nested rules
  • Using SASS Variables
  • Using SASS Functions
  • Using SASS Mixins
  • Formatting CSS output
  • Exercises

Mixin Libraries for SASS

  • The Compass library
    • Strengths & weakeness
  • The Bourbon library
    • Strengths & weakeness
  • Vendor prefix mixins
  • Shorthand property mixins
  • Function mixins
  • Other mixin types
  • Exercises

Advanced SASS

  • @extend rules
  • SASS Mixins instead of HTML classess
  • Extend basic mixins with SASS variables
  • Advanced SASS functions
  • Debugging SCSS and CSS
  • Exercises

Customise Bootstrap with SASS

  • The Bootstrap SASS distribution
  • Bootstrap without class name clutter
  • Overriding Bootstrap defaults
  • Enhancing Bootstrap with SASS mixins

SASS TrainingCourse Schedule

SASS TrainingFurther Details

Course Objectives

On completion of this CSS training course, students will be able to:

  • Maintain and extend complex CSS codebases more easily
  • Remove non-semantic class name clutter from their HTML
  • Write much less CSS code to achieve styling objectives
  • Write DRY CSS — i.e. ‘do not repeat yourself’
  • Use SASS mixin libraries to save time and reduce errors, by:
    • Deploying ‘best practice’ solutions to common problems, e.g. clearfixing
    • Ensuring cross-browser compatible CSS — without typing vendor prefixes
    • Ensuring legacy browser compatibility — without the usual hassle
  • Use cutting edge CSS3 effects — safely
  • Install and manage SASS, Compass, Bourbon and (optionally) Bootstrap

Target Audience

  • Advanced web designers
  • Front-end web developers/programmers
  • Graphic designers with advanced web design skills

Training Pre-requisites

These two Web Design Academy courses — or equivalent experience:

Prior CSS3 experience is not required for this SASS course, but you'll get more out of it, if you are familiar with the CSS3 features covered in our CSS3 Essentials course (CSS3-01)

Training Style

This SASS training is notably hands-on and practical — it devotes approximately half the contact time to practical exercises at your workstation.

The CSS2.1 and CSS3 code written throughout the course will be essentially hand-coded — but pre-prepared markup, styling and content is provided for exercises, to save time and direct activity to the key skills concerned.