Opleiding: 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
