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

hphoeksma@stylence.nlcallto://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