cursus SASS & Compass

In deze cursus leert u aan de slag gaan met SASS. We leren in deze handleiding ook de voordelen en beginselen van COMPASS. SASS is een CSS preprocessor, die je erg veel tijd zal besparen bij het omzetten van een idee naar een toepassing. SASS biedt vele extra mogelijkheden en voordelen ten opzichte van CSS. SASS gaat verder dan LESS. Het schrijven van de taal gaat sneller, maar je kan ook met variabelen werken, eenheden combineren, voorwaarden en herhalingen gebruiken enz. We gaan aan de slag met Scout en Koala. Je CSS-code wordt automatisch gecomprimeerd (minified), fouten worden gedetecteerd en prefixen worden automatisch toegevoegd!

Eens je omgeschakeld bent naar SASS zal je vele voordelen ondervinden: een snellere workflow (productieproces), veel meer overzicht en structur, minder en slimmer code schrijven, enz.

In deze cursus leer je welke (gratis) software je moet installeren om aan de slag te kunnen met SASS (op windows en mac). Verder leer je de syntax aan.

Inhoudsopgave

• Inleiding: aan welke factoren voldoet een goede website?
• Voor je start met de cursus, nog even dit.
• Inleiding: HTML en CSS
  Hoe verhouden HTML en CSS zich?
• Voordelen van Sass
  Wat zijn de problemen bij hedendaags webdesign (browser, mobiel, enz) en welke oplossingen biedt Sass?
• SASS versus SCSS
  
• Van start in de code-editor
  We overlopen even hoe de mappenstructuur eruit moet zien en starten in Sublime Text (gratis / gebruik gerust een andere editor).
• Koala
  We bekijken de mogelijkheden en werking van de gratis tool Koala.
• Scout
  We bekijken de mogelijkheden en werking van de gratis tool Scout.
• Een eerste project
  We starten met een eenvoudig, klein project om de workflow te leren kennen.
• Sass: variabelen
  We leren werken met variabelen
• Sass: nesten
  We leren CSS-code nesten en zo veel tijd besparen.
• Sass: partials
  We leren hoe je code kan herbruiken via partials
• Partials: 3 toepassingen
  We leren via partials een CSS-reset, lettertypenbibliotheek en Bootstrap implementeren.
• Sass: prefixen
  We leren hoe je ervoor kan zorgen dat je NOOIT meer moet prefixen.
• Sass: extend
  We leren via @extend code herbruiken.
• Sass: berekeningen
  We leren berekeningen maken in Sass.
• Sass: mixins
  We leren efficiënter code schrijven via @mixin.
• Sass: commentaar
  Sass heeft zijn eigen wijze om commentaar in te voegen. Deze wordt in de CSS ook weggefilterd. Behalve wanneer je dat niet wenst natuurlijk. We leren de bijhorende syntax.
• Sass: spelen met kleuren
  We leren via code kleuren donkerder en lichter te maken, te satureren, grijs maken, mixen en kleur te draaien (hue).
• Sass: @each
  We leren herhalingen inbouwen via @each
• Sass: voorwaarden
  We leren voorwaarden via @if, @else if en @else verwerken in onze CSS-code.
• Meer weten over Sass
  
• Compass
  We leren Compass installeren/activeren en gebruiken.
• Compass: css-reset
  We leren op 2 manieren een CSS-reset uitvoeren via Compass
• Compass: css3
  We leren via Compass schaduw, animatie, transformering, transparantie en kolommen toevoegen
• Compass: layout
  We leren via compass een sticky footer maken.
• Compass: typografie
  We leren via Compass typografische wijzigingen doen in opsommingen, linken en tekst.
• Compass: utilities
  We leren via Compass wijzigingen doen in linken, lijsten, tekst, sprites, kleuren en tabellen.
• En verder...
  We zetten je op weg met extra bronnen. Zocial, Breakpoint, FireSass, Sassaparilla, Hammer, Forge, Live Reload, Bourbon, Susy, enz.