Sass and Less Preprocessing

In the course Sass and Less Preprocessing from SpiralTrain participants learn the functionalities of the CSS Preprocessors Sass and Less.

Syntax Sass and Less

The course starts with a discussion of the basic characteristics of Sass and Less. The Sass syntax with the .scss file extension is discussed. Sass uses standard CSS syntax with braces and semicolons. It is also explained how Less is actually a JavaScript library that requires either NodeJS or compilation using .less files.

Sass Variables and Types

Subsequently the variables and types of Sass are discussed and the scope of variables, nested rules and nested properties is explained. And also Sass Plugins are treated.

Less Variables and Types

Attention is paid as well to Less variables and types and the syntax of variable interpolation is discussed. The use of mixin's and the parameterization thereof is also part of the program of the course.

Directives

A number of directives can be used in Sass such as @import, @mixin, @include and @extend. The meaning and application of these directives is treated. There is also attention for various Sass functions such as Map, Selector and Introspection.

Testing Sass and Less

The course concludes with the subject of testing Sass and Less. This includes the Less Hat, Clearless and 3L libraries.

Audience Course Sass and Less Preprocessing

The course Sass and Less Preprocessing is intended for Web Designers and Developers who want to use Sass and Less Preprocessing in the development of Web Applications.

Prerequisites Course Sass and Less Preprocessing

Knowledge and experience with HTML and the basic principles of Cascading Style Sheets (CSS) are required.

Realization Training Sass and Less Preprocessing

The concepts are discussed on the basis of presentation slides. Demo projects are used to clarify the concepts. The theory and the demos are interchanged with hands-on exercises. Course times are from 9.30 to 16.30.

Certification Sass and Less Preprocessing

After successful completion of the course participants receive an official certificate Sass and Less Preprocessing.

Modules

Module 1 : CSS Preprocessors

• What is Sass?
• Installing Sass
• CSS Extensions
• Sass Transpilation
• What is Less?
• CSS3 for Styling
• CSS Inheritance
• CSS Cascading
• Compiling Less
• CSS Resets
• Layout in Less
• Autoprefixing
• BEM Methodology

Module 2 : Sass Variables

• Variable Syntax
• Strings
• Numbers
• Colors
• Booleans
• Lists
• Nulls
• SCSS Syntax
• Variable Scope
• Sass !global
• Plugins
• Nested Rules
• Nested Properties

Module 3 : Less Variables

• Naming Variables
• Variable Types
• Using Variables
• Variable Interpolation
• Non Staticness
• Declaration Order
• Escaping Values
• Detached Rulesets
• Lazy Loading
• Mixins
• Basic Mixins
• Parametric Mixins
• Default Values

Module 4 : Sass Directives

• Importing Files
• Sass @import
• Partials
• Sass Mixins
• @mixin
• Defining Mixins
• Passing Parameters
• Vendor Prefixes Mixin
• @include
• @extend Directive
• Inheritance

Module 5 : Sass Functions

• String Functions
• Numeric Functions
• List Functions
• join and append
• Map Functions
• Selector Functions
• Introspection Functions
• feature-exists
• function-exists
• type-of
• Color Functions

Module 6 : Testing Sass and Less

• Using Developer Tools
• Understanding TDD
• Test Cycle
• Using Style Guides
• Building Style Guides
• Prebuilt Mixins
• Less Hat Library
• SEO Debugging
• HTML Debugging
• Clearless Library
• 3L Library