présentation du préprocesseur Less CSS par Gauthier Eloy - http://www.igloo.be

1. is m o re !
mercredi 30 janvier 13

2. { 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

3. { }
Qui a déjà utilisé un préprocesseur
CSS ?
mercredi 30 janvier 13

4. SASS css-tricks.com
SCSS 13 000 personnes
LESS June 2012
STYLUS
I don't like any of them
I don't have a preference
I've never tried any of them
Other
50
46
37,5
23 25
13
12,5
5 7
3
2
1
0
mercredi 30 janvier 13

5. { 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

6. { Time is money
Gagnez 50% de votre temps en production
}
mercredi 30 janvier 13

7. { Le préprocesseur CSS
}
‣ Définition
‣ Avantages :
‣ Maintenabilité & organisation
‣ Rapidité de développement & robustesse
‣ Nouveaux outils pratiques & productivité
mercredi 30 janvier 13

8. { Less en pratique
}
1. Variables
2. Nested rules
3. Opérations
4. Mixins & fonctions
mercredi 30 janvier 13

9. { }
Less talk,
more action!
mercredi 30 janvier 13

10. { }
1. Variables
mercredi 30 janvier 13

11. CSS
Less CSS
mercredi 30 janvier 13

12. { }
2. Nested rules
mercredi 30 janvier 13

13. CSS
Less CSS
mercredi 30 janvier 13

14. { }
3. Opérations
mercredi 30 janvier 13

15. CSS
Less CSS
mercredi 30 janvier 13

16. CSS
Less CSS
mercredi 30 janvier 13

17. { }
4.Mixins & fonctions
mercredi 30 janvier 13

18. CSS
mercredi 30 janvier 13

19. Less CSS
mercredi 30 janvier 13

20. CSS
Less CSS
mercredi 30 janvier 13

21. mercredi 30 janvier 13

22. mercredi 30 janvier 13

23. { }
Fonctions
mercredi 30 janvier 13

24. CSS
Less CSS
mercredi 30 janvier 13

25. fadein hsv ceil saturate lightness
saturation fade screen hsla softlight overlay
spin rgba darken hsva negation hsl
desaturate luma floor average
percentage rgb multiply hardlight
escape alpha red greyscale mix green
contrast hue blue difference exclusion
mercredi 30 janvier 13

26. { Installation
}
simpLESS
http://wearekiss.com/simpless
LESSapp
http://incident57.com/less/
mercredi 30 janvier 13

27. mercredi 30 janvier 13

28. mercredi 30 janvier 13

29. mercredi 30 janvier 13

30. mercredi 30 janvier 13

31. mercredi 30 janvier 13

32. mercredi 30 janvier 13

33. { 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

34. { }
Merci !
dribbble.com/pixelize
@gauthiereloy
linkedin.com/in/gauthiereloy
mercredi 30 janvier 13

35. is m o re !
mercredi 30 janvier 13