is more !

mercredi 30 janvier 13

{ }A propos de moi

‣ Gauthier Eloy

‣ 25 ans

‣ Namur

‣ Diplômé en multimédia Liège

‣ Web & UI designer iGLOO.be

mercredi 30 janvier 13

}{ Qui a déjà utilisé un préprocesseur CSS ?

mercredi 30 janvier 13

0

12,5

25

37,5

50

5

13

23

3

7

2

46

1

SASSSCSSLESSSTYLUSI don't like any of themI don't have a preferenceI've never tried any of themOther

css-tricks.com 13 000 personnes

June 2012

mercredi 30 janvier 13

{ }Le CSS aujourd’hui

‣ Ses avantages

‣ CSS3

‣ Ses problèmes

‣ Redondance du code

‣ Pas de structure procédurale

‣ Manque de flexibilité

‣ Organisation linéaire, pas d’héritage

mercredi 30 janvier 13

}{ Time is moneyGagnez 50% de votre temps en production

mercredi 30 janvier 13

{ }Le préprocesseur CSS

‣ Définition

‣ Avantages :

‣ Maintenabilité & organisation

‣ Rapidité de développement & robustesse

‣ Nouveaux outils pratiques & productivité

mercredi 30 janvier 13

{ }Less en pratique

1. Variables

2. Nested rules

3. Opérations

4. Mixins & fonctions

mercredi 30 janvier 13

}{ Less talk,more action!

mercredi 30 janvier 13

}{ 1. Variables

mercredi 30 janvier 13

Less CSS

CSS

mercredi 30 janvier 13

}{ 2. Nested rules

mercredi 30 janvier 13

CSS

Less CSS

mercredi 30 janvier 13

}{ 3. Opérations

mercredi 30 janvier 13

Less CSS

CSS

mercredi 30 janvier 13

Less CSS

CSS

mercredi 30 janvier 13

}{ 4.Mixins & fonctions

mercredi 30 janvier 13

CSS

mercredi 30 janvier 13

Less CSS

mercredi 30 janvier 13

CSS

Less CSS

mercredi 30 janvier 13

mercredi 30 janvier 13

mercredi 30 janvier 13

}{ Fonctions

mercredi 30 janvier 13

CSS

Less CSS

mercredi 30 janvier 13

escape red

ceil

floor

saturate

negation

rgb

rgba

luma

hslhsla

hsv

hsva

green

bluehue

percentage

lightness

saturation

alpha

desaturatedarken

fadein

average

fadespin

mixgreyscalecontrast

multiply

screen overlaysoftlight

hardlight

difference exclusion

mercredi 30 janvier 13

{ }Installation

simpLESShttp://wearekiss.com/simpless

LESSapphttp://incident57.com/less/

mercredi 30 janvier 13

mercredi 30 janvier 13

mercredi 30 janvier 13

mercredi 30 janvier 13

mercredi 30 janvier 13

mercredi 30 janvier 13

mercredi 30 janvier 13

{ }Pour aller plus loin...

Documentation Less

‣ lesscss.org

Librairies existantes

‣ lesselements.com

Twitter Bootstrap

‣ github.com/bootstrap/

Inuit CSS

‣ github.com/peterwilsoncc/inuit.css

mercredi 30 janvier 13

}{ Merci !dribbble.com/pixelize

@gauthiereloy

linkedin.com/in/gauthiereloy

mercredi 30 janvier 13

is more !

mercredi 30 janvier 13