Modern CSS met Sass - Praktijk Tutorial

Dank CSS-voorverwerkers kan CSS aanzienlijk effectiever worden geschreven. Wat deze voorverwerkers zijn, welke er zijn en waarom de keuze in deze reeks op Sass viel, wordt getoond in deze video.

Voordat Sass gebruikt kan worden, moet het geïnstalleerd worden. En de vereiste daarvoor is Ruby. Beide - dus de installatie van Ruby en Sass - worden in deze video getoond. Daarna kunnen jullie meteen testen of de Sass-installatie daadwerkelijk is gelukt.

Sass-bestanden moeten worden omgezet in CSS-bestanden om ze daadwerkelijk bruikbaar te maken. Dankzij het Watch-commando kunnen jullie wijzigingen in afzonderlijke bestanden of in hele mappen heel gemakkelijk detecteren (laten).

Met @import kunt u SCSS-bestanden importeren en samenvoegen. Wat dit alles te maken heeft met een voorafgaand underscore in de bestandsnaam, is een aspect van deze video.

In Sass is er de mogelijkheid om variabelen te declareren. Dit concept is zoals bekend niet beschikbaar in traditionele CSS, maar in Sass is het een geniaal middel voor effectieve ontwikkeling van stylesheets.

Dank nesting kan de Sass-syntax veel compacter worden gehouden dan gebruikelijk is in CSS. De nesting helpt je ook om de code veel overzichtelijker te schrijven.

Het gebruik van @extend stelt jullie in staat om een reeks CSS-eigenschappen van de ene naar de andere selector door te geven. Ook dit helpt om Sass-bestanden slank te houden.

De placeholder-selector maakt het mogelijk om modules te definiëren. Deze modularisatie maakt het mogelijk om de Sass-syntax op te delen in logische blokken die op verschillende plaatsen kunnen worden ingevoegd.

Mixins zijn functies waarmee bijvoorbeeld werkprocessen aanzienlijk vereenvoudigd kunnen worden. In deze video wordt getoond hoe je je eigen mixins kunt definiëren en uiteindelijk kunt toepassen.

Met de selector waar dit in deze video over gaat, kun je toegang krijgen tot het ouderlijke element van een element. Deze selector bestaat zoals bekend niet in CSS en biedt daarom aanzienlijke toegevoegde waarde.

Sass maakt het gebruik van for-lussen mogelijk. Dit werkt heel eenvoudig in Sass en kan bijvoorbeeld worden gebruikt voor het definiëren van een eigen grid-systeem.

Naast For-lussen kunnen in Sass ook Each- en While-lussen worden gebruikt. Hoe dit kan worden gebruikt voor automatisering, wordt getoond in deze video.

In talen zoals PHP en JavaScript is het mogelijk om te reageren op verschillende gebeurtenissen met if en else. Dit is eigenlijk ook mogelijk in Sass. Hoe je dit kunt gebruiken, wordt getoond in deze video.

Jullie kunnen rekenen in Sass. Dat is bijvoorbeeld handig voor het definiëren van lettergroottes. Dankzij de juiste operatoren kun je echter ook je eigen individuele grid-systeem bouwen.

Natuurlijk kunnen kleuren worden gedefinieerd in Sass. Maar Sass gaat ook op dit gebied aanzienlijk verder dan conventionele CSS. Dankzij de bijbehorende functies kunnen bijvoorbeeld heel gemakkelijk kleuren worden aangepast.

Het Compass-framework breidt de mogelijkheden van Sass nog verder uit. Deze eerste video laat zien hoe jullie Compass kunnen installeren en gebruiken.

De website van het project Compass is het centrale informatiemiddel als het gaat om het werken met dit framework. Ik laat jullie aan de hand van de CSS3-functies van Compass zien hoe jullie met de documentatie kunnen werken.

Een voorbeeld toont hoe gemakkelijk dingen met Compass kunnen worden geïmplementeerd. Aan het einde van deze serie wordt ook gekeken naar een alternatief Sass-framework. Susy biedt een slank grid-systeem.