Sass & Compass

CSS maintenables
Tout pour vous réconcilier avec l’intégration HTML

1 Tälk #02 - valentin@pulz.fr

 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

 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

 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
 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

 Sass (4/5)
• Fonctions
• Appelées « mixins »
• DRY

Version compilée

Version Sass
6 Tälk #02 - valentin@pulz.fr
 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

 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

 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

 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