Course details

Extending CSS3 with Sass and Less

Extending CSS3 with Sass and Less

Target Audience
Expected Duration
Lesson Objectives
Course Number
Expertise Level

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


Expected Duration (hours)

Lesson Objectives

Extending CSS3 with Sass and Less

  • start the course
  • outline the features of Sass and how to install and use it, outline Sass syntax and create a Sass stylesheet
  • outline the features of SassScript - variables, data types, operations, and use the interactive shell to work with SassScript
  • work with nested CSS rules and reference parent selectors using Sass
  • work with nested CSS properties in Sass
  • use the @import rule in Sass, use partials and nested @imports
  • use nested @media queries
  • use the @extend directive in Sass
  • use the @extend directive for multiple and chained extends
  • use control directives in Sass
  • use the @at-root directive in Sass
  • use the @warn and @debug directives in Sass
  • use @mixin in Sass
  • work with functions in Sass
  • use Sass to extend CSS3
  • describe Less, and how it can be used; install and use Less
  • work with variables in Less
  • work with the Extend pseudo-class in Less
  • work with mixins in Less
  • pass rulesets to mixins in Less
  • use recursive mixins to create loop structures in Less
  • work with mixin guards and CSS guards in Less
  • work with import directives in Less
  • use & to reference parent selectors and to generate selectors in a list
  • use Less to extend CSS3
  • Course Number:

    Expertise Level