TYPO3 Congres 2012 - Introductie werken met CSS preprocessors
-
Upload
typo3-nederland -
Category
Technology
-
view
429 -
download
7
description
Transcript of TYPO3 Congres 2012 - Introductie werken met CSS preprocessors
Introductie werken metCSS Preprocessors
henjo hoeksma
CSS Pre.. wat?
CSS Pre.. wat?
• Pre - processing: het zit voor CSS
CSS Pre.. wat?
• Pre - processing: het zit voor CSS
• CSS on steroids...
CSS Pre.. wat?
• Pre - processing: het zit voor CSS
• CSS on steroids...
Waarom werken met CSS Preprocessors
Waarom werken met CSS Preprocessors
• Omdat het voor je output zit, heb je meer mogelijkheden
Waarom werken met CSS Preprocessors
• Omdat het voor je output zit, heb je meer mogelijkheden
• Nested CSS
Waarom werken met CSS Preprocessors
• Omdat het voor je output zit, heb je meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
Waarom werken met CSS Preprocessors
• Omdat het voor je output zit, heb je meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
Waarom werken met CSS Preprocessors
• Omdat het voor je output zit, heb je meer mogelijkheden
• Nested CSS
• Jouw manier van schrijven
• Leesbaarheid
• Goede cascading
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
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
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
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
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
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
Welke preprocessors zijn er? (1/2)
Welke preprocessors zijn er? (1/2)
Welke preprocessors zijn er? (1/2)
• SASS
Welke preprocessors zijn er? (1/2)
• SASS
• Syntactically Awesome Style Sheets
Welke preprocessors zijn er? (1/2)
• SASS
• Syntactically Awesome Style Sheets
• Een uitbreiding op CSS3
Welke preprocessors zijn er? (1/2)
• SASS
• Syntactically Awesome Style Sheets
• Een uitbreiding op CSS3
• SASS draait op Rails
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
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
Welke preprocessors zijn er? (2/2)
Welke preprocessors zijn er? (2/2)
Welke preprocessors zijn er? (2/2)
• Less
Welke preprocessors zijn er? (2/2)
• Less
• The dynamic stylesheet language.
Welke preprocessors zijn er? (2/2)
• Less
• The dynamic stylesheet language.
• Kan zowel client-side als server-side ingezet worden
Welke preprocessors zijn er? (2/2)
• Less
• The dynamic stylesheet language.
• Kan zowel client-side als server-side ingezet worden
• Compilen niet nodig
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
Werken met CSS Preprocessors
Werken met CSS Preprocessors
• Frameworks & Presets
Werken met CSS Preprocessors
• Frameworks & Presets
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
• CodeKit (Compass / Less)
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
• CodeKit (Compass / Less)
• simpLESS
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
• CodeKit (Compass / Less)
• simpLESS
• Scout App
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
• CodeKit (Compass / Less)
• simpLESS
• Scout App
• ...
Werken met CSS Preprocessors
• Frameworks & Presets
• Compass (Sass)
• Lesselements (Less)
• Tools:
• Commandline (Compass native)
• Compass / Fire app
• CodeKit (Compass / Less)
• simpLESS
• Scout App
• ...
Demo time!
Demo time!
• Laten we aan de hand van Twitter Bootstrap zowel eens kijken naar SASS en Less!
Demo time!
• Laten we aan de hand van Twitter Bootstrap zowel eens kijken naar SASS en Less!
Resources
Resources• http://sass-lang.com
• http://lesscss.org
• http://compass-style.org
• http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
• http://css-tricks.com/sass-vs-less/
• http://incident57.com/codekit/
• http://mhs.github.com/scout-app/
Resources• http://sass-lang.com
• http://lesscss.org
• http://compass-style.org
• http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
• http://css-tricks.com/sass-vs-less/
• http://incident57.com/codekit/
• http://mhs.github.com/scout-app/
Henjo Hoeksma
Henjo Hoeksma
Photo by: Ben van ‘t Ende
[email protected]://henjohoeksmahttp://twitter.com/henjohoeksma http://nl.linkedin.com/in/henjohoeksma
http://henjohoeksma.nl | http://www.stylence.nl
https://github.com/hphoeksma/introductie-werken-met-css-preprocessors