IT Skills     Web Development and Graphic Design     Scripting     CSS

---

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.

---

---

Objectives

Introduction to Sass 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 CSS Extensions in Sass work with nested CSS rules and reference parent selectors using Sass work with nested CSS properties in Sass Using Sass @-Rules and Directives 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 Mixins and Functions in Sass use @mixin in Sass work with functions in Sass Practice: Working with Sass use Sass to extend CSS3 Using the Less CSS Pre-processor 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 Mixins 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 Import Directives and Selectors in Less work with import directives in Less use & to reference parent selectors and to generate selectors in a list Practice: Extending CSS3 with Less use Less to extend CSS3