CSS preprocessors zijn inmiddels al een aantal jaar aanwezig en zullen ook voorlopig niet verdwijnen. In deze sessie aandacht voor de voordelen van het werken met en een overzicht van de belangrijkste CSS preprocessors.
CSS schrijven en beheren kan met gebruik van preprocessors enorm worden verbeterd: een must voor iedere frontender en ontwikkelaar en makkelijk om op te pakken.
Henjo Hoeksma
Na enkele jaren als hobby met TYPO3 gewerkt te hebben, heeft Henjo zijn beroep gemaakt van het ontwikkelen van websites en webapplicaties op basis van het TYPO3 framework. Na een korte periode gewerkt te hebben als ontwikkelaar bij alterNET en een internationaal bedrijf in LED verlichting is hij als freelancer aan de slag gegaan.
Met een passie voor nieuwe technieken, kwalitatieve oplossingen & code en de TYPO3 producten & community ondersteunt hij vanuit zijn bedrijf Stylence zowel grote als minder grote organisaties in de ontwikkeling van websites en maatwerk oplossingen.
7. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
8. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
9. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
10. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
11. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
12. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
• Variabelen
13. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
• Variabelen
• Functies / Mixins
14. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
• Variabelen
• Functies / Mixins
• Hergebruik
15. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
• Variabelen
• Functies / Mixins
• Hergebruik
• Output controle
16. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
• Variabelen
• Functies / Mixins
• Hergebruik
• Output controle
• Wel of geen comments
17. Waarom werken met
CSS Preprocessors
• Omdat het voor je output zit, heb je
meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
• Variabelen
• Functies / Mixins
• Hergebruik
• Output controle
• Wel of geen comments
• Wel of niet compressed
22. Welke preprocessors zijn
er? (1/2)
• SASS
• Syntactically Awesome
Style Sheets
• Een uitbreiding op CSS3
23. Welke preprocessors zijn
er? (1/2)
• SASS
• Syntactically Awesome
Style Sheets
• Een uitbreiding op CSS3
• SASS draait op Rails
24. Welke preprocessors zijn
er? (1/2)
• SASS
• Syntactically Awesome
Style Sheets
• Een uitbreiding op CSS3
• SASS draait op Rails
• SASS files moeten
gecompiled worden
voor ze als CSS gebruikt
kunnen worden
25. Welke preprocessors zijn
er? (1/2)
• SASS
• Syntactically Awesome
Style Sheets
• Een uitbreiding op CSS3
• SASS draait op Rails
• SASS files moeten
gecompiled worden
voor ze als CSS gebruikt
kunnen worden
• http://sass-lang.com
30. Welke preprocessors zijn
er? (2/2)
• Less
• The dynamic
stylesheet language.
• Kan zowel client-
side als server-side
ingezet worden
31. Welke preprocessors zijn
er? (2/2)
• Less
• The dynamic
stylesheet language.
• Kan zowel client-
side als server-side
ingezet worden
• Compilen niet nodig
32. Welke preprocessors zijn
er? (2/2)
• Less
• The dynamic
stylesheet language.
• Kan zowel client-
side als server-side
ingezet worden
• Compilen niet nodig
• http://lesscss.org