Sass and Less Preprocessing

Syntax Sass en Less

De cursus gaat van start met een bespreking de basis kenmerken van Sass en Less. De Sass syntax met de .scss file extension wordt besproken. Sass gebruikt standard CSS syntax met braces en semicolons. Ook wordt uitgelegd hoe Less eigenlijk een JavaScript library is die of NodeJS vereist dan wel compilatie met behulp van .less files.

Sass Variables en Types

Vervolgens komen de variabelen en types van Sass aan de orde en wordt ingegaan op de scope van variabelen, nested rules en nested properties. En ook Sass Plugins worden besproken.

Less Variables en Types

Eveneens wordt aandacht besteed aan Less variabelen en types en komt de syntax van variabele interpolatie ter sprake. Ook het gebruik van mixin's en het parameteriseren daarvan is onderdeel van het programma van de cursus.

Directives

In Sass kunnen een aantal directives worden gebruikt zoals @import, @mixin, @include en @extend. De betekenis en de toepassing van deze directives wordt besproken. En ook is er aandacht voor diverse Sass functies zoals Map, Selector en Introspection.

Testen van Sass en Less

De cursus wordt afgesloten het testen van Sass en Less. Hierbij komen onder andere de Less Hat, Clearless en 3L libraries aan de orde.

Doelgroep Cursus Sass and Less Preprocessing

De cursus Sass and Less Preprocessing is bedoeld voor Web Designers en Developer die Sass and Less Preprocessing willen gebruiken bij de ontwikkeling van Web Applicaties.

Voorkennis Cursus Sass and Less Preprocessing

Kennis en ervaring met HTML en de basis principes van Cascading Style Sheets (CSS) zijn vereist.

Uitvoering Training Sass and Less Preprocessing

De concepten worden behandeld aan de hand van presentatie slides. Demo projecten worden gebruikt om de concepten te verduidelijken. De theorie en de demos worden afgewisseld met hands-on oefeningen. De cursustijden zijn van 9.30 tot 16.30.

Certificering Sass and Less Preprocessing

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat 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