Sass & Compass    CSS maintenables     Tout pour vous réconcilier avec l’intégration HTML1                                ...
CSS et maintenance         La difficulté de maintenir une grosse application    • Gros projets = fichiers CSS denses et vo...
Sass (1/5)                    SASS est un préprocesseur CSS    • Principe DRY (Don’t Repeat Yourself)      • Génère un fic...
Sass (2/5)    • Règles imbriquées      • Notion d’héritage gérée par imbrication des sélecteurs                           ...
Sass (3/5)    • Variables      • Notion de variable comme dans n’importe quel langage      • Maintenance / évolution facil...
Sass (4/5)    • Fonctions      • Appelées « mixins »      • DRY                              Version compilée             ...
Sass (5/5)    • Autres fonctionnalités pratiques      •   Import des fichiers      •   Traitement des couleurs : darken, l...
Compass (1/2)                   Compass est un metaframework    • Les avantages de compass :      • Plein de mixins prêts ...
Compass (2/2)    • Exemple d’utilisation :    • Autres fonctionnalités :      •   Traitement des images (URL, dimensions, ...
www.pulz.fr – Collectif effervescent de travailleurs indépendants                      valentin@pulz.fr                   ...
Prochain SlideShare
Chargement dans…5
×

Sass & Compass : CSS maintenables

1 547 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
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 547
Sur SlideShare
0
Issues des intégrations
0
Intégrations
151
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
0
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

×