Modern CSS met SASS

Taal: Duits

Modern CSS met Sass - Praktijk Tutorial

Heb je je altijd al geërgerd over het ontbreken van variabelen en lussen in CSS? Daar is nu een einde aan! CSS-preprocessors zoals Sass bieden precies dat soort functionaliteiten aan. Op die manier kan CSS-code eindelijk efficiënt worden gegenereerd. Naast Sass wordt er in deze tutorial natuurlijk ook gekeken naar het alom geliefde Compass-framework, dat het gebruik van Sass naar een hoger niveau tilt. Ontdek in drie uur de mogelijkheden die Sass en Compass te bieden hebben.

Word een Sass-meester met deze training van drie uur en webontwikkelaar Daniel Koch.
Definieer variabelen, maak je eigen mixins, experimenteer met kleuren en cijfers en gebruik als kers op de taart Compass op.
Leer efficiënt CSS te maken en pas je nieuwe kennis toe op toekomstige projecten.

Stap voor stap naar professionele CSS-ontwikkeling. Als het om CSS gaat, dan modern en met Sass – Daniel Koch laat het je zien!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

details

Bruikbaar met:
Inhoud: 3 h Videotraining
Licentie: privé en commercieel Gebruiksrechten

Categorieën

Webdesign, CMS & Ontwikkeling

Met liefde gemaakt door:

Daniel Koch

Modern CSS met Sass.

Gratis

Modern CSS met Sass - 01 Een introductie

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.

Modern CSS met Sass - 02 De installatie.

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.

Modern CSS met Sass - 03 Behendige compilatie.

Modern CSS met Sass - 03 Voortreffelijke compilatie

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).

Modern CSS met Sass - 04 bestanden samenvoegen.

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.

Modern CSS met Sass - 05 Variabelen declareren en gebruiken

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.

Modern CSS met Sass - 06 Het nesten principe

Modern CSS met Sass - 06 Het nesting-principe

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.

Modern CSS met Sass - 07 Slimme overerving met Extend

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.

Modern CSS met Sass - 08 Modules met de placeholder-selectors.

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.

Modern CSS met Sass - 09 mixins definiëren

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.

Modern CSS met Sass - 10 De ouder-elementselector.

Moderne CSS met Sass - 10 De ouder-element-selector

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.

Modern CSS met Sass - 11 Automatisering met For-lussen

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.

Modern CSS met Sass - 12 elk- en while-lussen

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.

Modern CSS met Sass - 13 beslissingen met if en else

Modern CSS met Sass - 13 uitvoeringsbeslissingen met if en else

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.

Modern CSS met Sass - 14 Wiskundige Operatoren

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.

Modern CSS met Sass - 15 kleurspellen

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.

Modern CSS met Sass - 16 Compass

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

Modern CSS met Sass - 17 Compass en CSS3

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.

Modern CSS met Sass - 18 Compass in actie en een kijkje op Susy.

Modern CSS met Sass - 18 Compass in Bullet-actie en een blik op Susy

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.

Details over de inhoud

CSS efficiënt gebruiken – met Sass: begin met de praktijk tutorial
Sass heeft de ontwikkeling van CSS gerevolutioneerd, omdat nu eindelijk CSS-code effectief kan worden geschreven. In maar liefst drie uur met 18 lessen leer je alles wat belangrijk is over Sass en het Sass-framework Compass.

Installatie van het Sass-ontwikkelingsplatform

Voordat je aan de CSS-tutorial met Sass begint, moet je deze installeren. Maar maak je geen zorgen – dit is heel eenvoudig. Ruby en een paar opdrachten in de terminal zijn genoeg en dan ben je de trotse eigenaar van een Sass-ontwikkelingsomgeving. Als je tot nu toe huiverig was voor de Sass-installatie, word je hier stap voor stap door het installatieproces geleid. Een eerste test zal vervolgens laten zien welke Sass-versie is geïnstalleerd.

Eerste stappen met een typische projectstructuur

Daarna volgen al snel de eerste stappen: Aan de slag met Sass! Na een eerste blik op de syntax volgen fundamentele taalspecificaties. Je leert variabelen kennen, krijgt een beeld van een typische projectstructuur en vindt snel je weg in Sass.

Ontwikkeling: lussen en If-statements

Zo voorbereid, volgt de professionele ontwikkeling: Wat Sass zo bijzonder maakt, zijn de zaken die bijna doen denken aan echte scripttalen zoals JavaScript. Want ook in Sass kunnen lussen worden gedefinieerd en If-statements worden gebruikt. Deze zaken vormen dan ook de basisvereiste voor de koninklijke discipline in Sass – het definieren van mixins. Dit zijn krachtige functies die je het werken met Sass, en uiteindelijk dus met CSS, aanzienlijk vergemakkelijken.

Compass: Vereenvoudigt het werken met CSS

De kroon op dit trainingsprogramma is Compass. Dit tilt de Sass-ontwikkeling nogmaals naar een geheel nieuw niveau, want dit Sass-framework biedt talloze tools en functies die het werken met CSS opnieuw aanzienlijk vereenvoudigen.

Dit leer je in de CSS- en Sass-tutorial

Je leert stap voor stap de functies van Sass kennen, van de beginfase tot de professionele tools en tot het werken met Compass. Hiermee krijg je direct inzicht in wat er momenteel mogelijk is en kun je je kennis direct toepassen. Het schrijven van CSS was nog nooit zo efficiënt!