Présentation de Sass et de Compass, dans l'optique de maintenir facilement et proprement des applications web volumineuses.

1. Sass & Compass
CSS maintenables
Tout pour vous réconcilier avec l’intégration HTML
1 Tälk #02 - valentin@pulz.fr

2. CSS et maintenance
La difficulté de maintenir une grosse application
• Gros projets = fichiers CSS denses et volumineux
• Difficile à maintenir proprement
• Héritage délicat à mettre en place
• CSS3 : navigateurs multiples = préfixes multiples
2 Tälk #02 - valentin@pulz.fr

3. Sass (1/5)
SASS est un préprocesseur CSS
• Principe DRY (Don’t Repeat Yourself)
• Génère un fichier .css en fonction d’une source (.scss)
• Possède sa propre syntaxe
• Exemple du box-shadow
3 Tälk #02 - valentin@pulz.fr

4. Sass (2/5)
• Règles imbriquées
• Notion d’héritage gérée par imbrication des sélecteurs
Version compilée
Version Sass
4 Tälk #02 - valentin@pulz.fr

5. Sass (3/5)
• Variables
• Notion de variable comme dans n’importe quel langage
• Maintenance / évolution facilitées
Version compilée
Version Sass
5 Tälk #02 - valentin@pulz.fr

6. Sass (4/5)
• Fonctions
• Appelées « mixins »
• DRY
Version compilée
Version Sass
6 Tälk #02 - valentin@pulz.fr

7. Sass (5/5)
• Autres fonctionnalités pratiques
• Import des fichiers
• Traitement des couleurs : darken, lighten, …
• Transparence et opacité
• …
7 Tälk #02 - valentin@pulz.fr

8. Compass (1/2)
Compass est un metaframework
• Les avantages de compass :
• Plein de mixins prêts à l’emploi
• Des propriétés CSS3 simplifiées
• Des extensions : boilerplate, bootstrap, grid960, …
• Un script génère les .css à la volée à chaque modification
• Développement plus rapide
• Mise en production optimale (fichiers minifiés, etc)
8 Tälk #02 - valentin@pulz.fr

9. Compass (2/2)
• Exemple d’utilisation :
• Autres fonctionnalités :
• Traitement des images (URL, dimensions, …)
• Génération de sprites
• CSS3 simplifié multi-navigateurs
• …
9 Tälk #02 - valentin@pulz.fr

10. www.pulz.fr – Collectif effervescent de travailleurs indépendants
valentin@pulz.fr
@valentin_
Sources :
CSS maintenables avec Sass & Compass
Kaelig Deloumeau-Prigent, Eyrolles
10 Tälk #02 - valentin@pulz.fr