- Leren door doen
- Trainers met praktijkervaring
- Klassikale trainingen
- Gedetailleerd cursusmateriaal
- Duidelijke inhoudsbeschrijving
- Maatwerk inhoud mogelijk
- Trainingen die doorgaan
- Kleine groepen
In de cursus Sass and Less Preprocessing van SpiralTrain leren de deelnemers de functionaliteiten van de CSS Preprocessors Sass en Less. Preprocessors zijn script talen die een uitbreiding bieden op de default mogelijkheden van CSS. Hierdoor wordt het mogelijk logica in CSS code te gebruiken met variabelen, nesting, inheritance, mixins, functies en mathematische operaties. CSS preprocessors maken het makkelijk zich steeds herhalende taken te automatiseren en het aantal fouten te verminderen.
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.
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.
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.
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.
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.
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.
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.
Kennis en ervaring met HTML en de basis principes van Cascading Style Sheets (CSS) zijn vereist.
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.
De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat Sass and Less Preprocessing.
Module 1 : CSS Preprocessors |
Module 2 : Sass Variables |
Module 3 : Less Variables |
|
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 |
Variable Syntax Strings Numbers Colors Booleans Lists Nulls SCSS Syntax Variable Scope Sass !global Plugins Nested Rules Nested Properties |
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 |
Module 5 : Sass Functions |
Module 6 : Testing Sass and Less |
|
Importing Files Sass @import Partials Sass Mixins @mixin Defining Mixins Passing Parameters Vendor Prefixes Mixin @include @extend Directive Inheritance |
String Functions Numeric Functions List Functions join and append Map Functions Selector Functions Introspection Functions feature-exists function-exists type-of Color Functions |
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 |