Sass & Compass : CSS maintenables

1 714 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 714
Sur SlideShare
0
Issues des intégrations
0
Intégrations
159
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Sass & Compass : CSS maintenables

  1. 1. Sass & Compass CSS maintenables Tout pour vous réconcilier avec l’intégration HTML1 Tälk #02 - valentin@pulz.fr
  2. 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 multiples2 Tälk #02 - valentin@pulz.fr
  3. 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-shadow3 Tälk #02 - valentin@pulz.fr
  4. 4. Sass (2/5) • Règles imbriquées • Notion d’héritage gérée par imbrication des sélecteurs Version compilée Version Sass4 Tälk #02 - valentin@pulz.fr
  5. 5. Sass (3/5) • Variables • Notion de variable comme dans n’importe quel langage • Maintenance / évolution facilitées Version compilée Version Sass5 Tälk #02 - valentin@pulz.fr
  6. 6. Sass (4/5) • Fonctions • Appelées « mixins » • DRY Version compilée Version Sass6 Tälk #02 - valentin@pulz.fr
  7. 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. 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. 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. 10. www.pulz.fr – Collectif effervescent de travailleurs indépendants valentin@pulz.fr @valentin_ Sources : CSS maintenables avec Sass & Compass Kaelig Deloumeau-Prigent, Eyrolles10 Tälk #02 - valentin@pulz.fr

×