Sass Introduction (2 days – £1,190)

This introduction to Sass (syntactically awesome style sheets) is a hands-on workshop aimed at web developers who are already familiar with HTML and CSS. Delegates will learn how to create style sheets which are clearer and less repetitive by leveraging sophisticated features not inherent in CSS such as variables, functions, conditional statements and loops.

Getting started

Installing Sass, Creating a Sass stylesheet, Sass comments, Adding sass support to sublime text, Compiling Sass files using Sublime Text, Removing installed packages

Working with variables

Creating variables, Global variables, local variables, and default values, Using variables to create colourss, Working across multiple files, Mathematical manipulation of variables, Manipulating Variables with Core Colours Functions

Mixins and extend

Building mixins, Moving mixins to an external file, Passing arguments to mixins, Using @import, Using prebuilt mixin libraries, Eliminating extra classes with extends, Creating multiple extends, Chaining extends

Functions and operators

Creating values using functions and operators, Manipulating variables with mathematical functions, Creating colours using functions, Changing the colours in use, Changing font sizes using operators, Creating site themes using functions, Creating palettes using functions, Constructing layouts using functions and operators

Using nested styles

Understanding nesting with Sass, Using & to reference parent selectors, Nesting within selectors

Sass @rules and directives

Using @import, Making a site responsive with @media, Working with the @extend directive, Creating dialog boxes using @extend

Sass control directives

Using the @if directive, Working with @if/@else and default mixin values, Working with the @for directive, The @each directive

Incorporating Sass into Projects

Converting existing projects to use Sass, Incorporating Sass into existing sites, Incorporating CSS grids, Applying Sass to frameworks, Implementing Bootstrap-Sass, Adapting a WordPress theme to use Sass

Compiling Sass

Creating a configuration file, Compiling Sass from the command line, Compiling Sass using Sublime Text, Using Node and Gulp