Sass and Less Preprocessing

Cursus Sass and Less Preprocessing

In de cursus Sass and Less Preprocessing leert u de basis van deze krachtige preprocessing tools. Tijdens de cursus worden de unieke kenmerken van Sass en Less besproken, waardoor u in staat bent om efficiënter en gestructureerder CSS te schrijven. U ontdekt hoe u met de .scss file extension werkt en hoe Sass gebruikmaakt van de standaard CSS-syntaxis met accolades en puntkomma's. Daarnaast leert u dat Less een JavaScript library is die NodeJS vereist of dat het compilatie met behulp van .less files nodig heeft.

Syntax Sass en Less

De cursus gaat van start met een bespreking van de basiskenmerken van Sass en Less. De Sass-syntaxis met de .scss file extension wordt besproken. Sass gebruikt standaard CSS-syntaxis met accolades en puntkomma's. Ook wordt uitgelegd hoe Less eigenlijk een JavaScript library is die NodeJS vereist of compilatie met behulp van .less files.

Sass Variables en Types

Vervolgens komen de variabelen en types van Sass aan de orde. U leert over de scope van variabelen, nested rules en nested properties. Ook de Sass Plugins worden besproken, wat u in staat stelt om uw workflow verder te optimaliseren.

Less Variables en Types

Eveneens wordt aandacht besteed aan Less variabelen en types. De syntaxis van variabele interpolatie komt ter sprake, evenals het gebruik van mixins en het parameteriseren daarvan. Deze kennis is essentieel voor het effectief gebruik van Less in uw projecten.

Directives in Sass

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

Testen van Sass en Less

De cursus wordt afgesloten met het testen van Sass en Less. Hierbij komen onder andere de Less Hat, Clearless en 3L libraries aan de orde. Voor meer informatie over Sass kunt u de officiële documentatie raadplegen op Sass Documentation. Voor een breder begrip van webontwikkeling is het ook nuttig om de HTML Fundamentals cursus te volgen.

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