Extending CSS3 with Sass and Less

This course is included in our On-demand training solution.

Overview

Despite its increasing flexibility and functionality, CSS does not include functionality such as nesting, functions, and the use of variables. Sass and Less pre-processors can be used to extend CSS, providing greater functionality and power and maintenance for your stylesheets.

Target Audience

Developers with knowledge of CSS3 who wish to learn how to extend the functionality of CSS with the Sass and Less pre-processors

Prerequisites

none

Expected Duration

90 min.

Course Objectives

Course Introduction

Getting Started with Sass

  • outline the features of Sass and how to install and use it, outline Sass syntax and create a Sass stylesheet
  • Using SassScript

  • outline the features of SassScript – variables, data types, operations, and use the interactive shell to work with SassScript
  • Nested CSS Rules in Sass

  • work with nested CSS rules and reference parent selectors using Sass
  • Nested CSS Properties in Sass

  • work with nested CSS properties in Sass
  • Using the @import Rule in Sass

  • use the @import rule in Sass, use partials and nested @imports
  • Using the @media Directive in Sass

  • use nested @media queries
  • Using the @extend Directive in Sass

  • use the @extend directive in Sass
  • Extending Complex Selectors in Sass

  • use the @extend directive for multiple and chained extends
  • Using Control Directives in Sass

  • use control directives in Sass
  • Using the @at-root Directive in Sass

  • use the @at-root directive in Sass
  • Using the @warn and @debug Directives in Sass

  • use the @warn and @debug directives in Sass
  • Working with Mixins

  • use @mixin in Sass
  • Working with Functions

  • work with functions in Sass
  • Exercise: Extend CSS3 with Sass

    Getting Started with Less

  • describe Less, and how it can be used; install and use Less
  • Working with Variables in Less

  • work with variables in Less
  • Working with the Extend pseudo-class in Less

  • work with the Extend pseudo-class in Less
  • Working with Mixins in Less

  • work with mixins in Less
  • Passing Rulesets to Mixins in Less

  • pass rulesets to mixins in Less
  • Working with Recursive Mixins in Less

  • use recursive mixins to create loop structures in Less
  • Working with Guards in Less

  • work with mixin guards and CSS guards in Less
  • Working with Import Directives in Less

  • work with import directives in Less
  • Parent Selectors and Combined Selectors

  • use & to reference parent selectors and to generate selectors in a list
  • Exercise: Extend CSS3 with Less

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.