Sass et Compassont embelli mon quotidien
CompassSassCSS
• d’organisation modulaire• de documentation• de compatibilité multi-navigateurs• de pièges à éviterNous parlerons
• de la syntaxe Sass• de plugins (Susy, 960gs, etc)• de la Grande question sur la vie, l’univers et leresteMais pas
Mehdi Kabab@piouPiouMmehdikababDéveloppeur Web
Mehdi Kabab@piouPiouMmehdikababAuteurSass & Compass avancéOptimiser ses feuilles de style CSS(2013)
Organisationmodulaire
Avant Sass• un unique document CSS à rallonge• chaque intervenant ajoute sa pierre àl’édifice, en bas du document• à l’oppo...
Intervenir sur ce projet ?Plus jamais !
Avec Sass• un document structuré• des rôles identifiables• un regroupement naturel parcomposants graphiques
Avec Sass• un document structuré• des rôles identifiables• un regroupement naturel parcomposants graphiques• une organisati...
Incite à penser objet
Un code réutilisable
Documentersans crainte
CSS, un triste constat• rares sont les projets CSS pourvus de vraiscommentaires utiles, comme :• les motivations d’un déca...
Commentaires Sass// Une classe préfixée par `mob-` permet de cibler spécifiquement la version// mobile du contenu. Ainsi, ...
• non générés dans la sortie CSS• visibles uniquement par les intervenants duprojets• fini la concession entre le poids de ...
Être compatible
CSS3 facile
$experimental-support-for-svg: true; // IE9.linear-gradient {@include filter-gradient(#a9e4f7, #0fb4e7); // IE6-8@include ...
21MêmeIE ?
22• seulement 9 règlescommunes à IE 8 et IE 7• aux-quelles s’ajoutent 19règles correctrices pour IE 7• un gain de tempscon...
Pièges à éviter
Ordre de déclarationdes variables$content-width: 960px !default;$sidebar-width: 250px !default;$main-width: $content-width...
Ordre de déclarationdes variables$content-width: 960px !default;$sidebar-width: 250px !default;$main-width: $content-width...
CSS non compressé• une tierce personne peut aisément éditer la feuillede style non compressé• sans forcément reporter les ...
Déléguer la compilation• exit la délégation d’une unique compilation sur leserveur• développeurs, vous commiteriez un code...
Questions ?
Liens• http://pioupioum.fr/compass-sauvez-integrateur/• http://fr.slideshare.net/stubbornella/object-oriented-css• http://...
Crédits photoshttp://www.flickr.com/photos/le_piaf_fou/3300132175/http://www.flickr.com/photos/dkdlv38/6783839447http://back...
Prochain SlideShare
Chargement dans…5
×

Sass et Compass ont embelli mon quotidien, Sud Web 2013

8 944 vues

Publié le

Ce n'est un secret pour personne : le travail d'intégrateur peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, la prise en charge des nouveaux devices numériques et la disparité des niveaux technologiques disponible sur le marché, l'intégrateur (ou développeur front-end) doit jongler entre de multiples langages et connaître une liste interminable de hacks a appliquer pour satisfaire tout ce petit monde.
Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?

Dans cette conférence SudWeb de 20 minutes, j'explique comment l'usage du préprocesseur CSS et de son framework CSS3 ont su embellir mon quotidien et m'ont incités à penser objet, documenter mes projets.
Tout n'étant jamais rose, j'aborde quelques pièges en mesure de nuire à l'avancement d'un projet.

Publié dans : Technologie
  • Soyez le premier à commenter

Sass et Compass ont embelli mon quotidien, Sud Web 2013

  1. 1. Sass et Compassont embelli mon quotidien
  2. 2. CompassSassCSS
  3. 3. • d’organisation modulaire• de documentation• de compatibilité multi-navigateurs• de pièges à éviterNous parlerons
  4. 4. • de la syntaxe Sass• de plugins (Susy, 960gs, etc)• de la Grande question sur la vie, l’univers et leresteMais pas
  5. 5. Mehdi Kabab@piouPiouMmehdikababDéveloppeur Web
  6. 6. Mehdi Kabab@piouPiouMmehdikababAuteurSass & Compass avancéOptimiser ses feuilles de style CSS(2013)
  7. 7. Organisationmodulaire
  8. 8. Avant Sass• un unique document CSS à rallonge• chaque intervenant ajoute sa pierre àl’édifice, en bas du document• à l’opposé du principe KISS (Keep ItSimple, Stupid)
  9. 9. Intervenir sur ce projet ?Plus jamais !
  10. 10. Avec Sass• un document structuré• des rôles identifiables• un regroupement naturel parcomposants graphiques
  11. 11. Avec Sass• un document structuré• des rôles identifiables• un regroupement naturel parcomposants graphiques• une organisation efficace
  12. 12. Incite à penser objet
  13. 13. Un code réutilisable
  14. 14. Documentersans crainte
  15. 15. CSS, un triste constat• rares sont les projets CSS pourvus de vraiscommentaires utiles, comme :• les motivations d’un décalage de 10px• des rappels sur la structure du document• la raison de la présence d’un préfixe mob- surcertaines classes
  16. 16. Commentaires Sass// Une classe préfixée par `mob-` permet de cibler spécifiquement la version// mobile du contenu. Ainsi, depuis une contribution initialement destinée à la// version desktop du site, ces classes nauront deffet que dans laffichage// mobile. En effet, certains jeux de classes existent dans les thèmes desktop// et mobile. Le webmaster souhaitant masquer un élément uniquement dans la version// mobile préférera appliquer la classe `mob-h` que la classe `h` qui impacterait// également laffiche desktop.// Masquer un texte..h, .mob-h {@include hide-text;display: none;}// Empêcher iOS deffectuer un zoom sur un élément de formulaire.// Cet helper est donc uniquement destiné a être étendu depuis des éléments// de formulaire !%helper-fx-select_nozoom {@include rem(font-size, 16px);}
  17. 17. • non générés dans la sortie CSS• visibles uniquement par les intervenants duprojets• fini la concession entre le poids de fichier final et lepoids des commentairesCommentaires Sass
  18. 18. Être compatible
  19. 19. CSS3 facile
  20. 20. $experimental-support-for-svg: true; // IE9.linear-gradient {@include filter-gradient(#a9e4f7, #0fb4e7); // IE6-8@include background-image(linear-gradient(#a9e4f7, #0fb4e7));}.linear-gradient {*zoom: 1;filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFA9E4F7,endColorstr=#FF0FB4E7);background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBmYjRlNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);background-size: 100%;background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9e4f7), color-stop(100%, #0fb4e7));background-image: -webkit-linear-gradient(#a9e4f7, #0fb4e7);background-image: -moz-linear-gradient(#a9e4f7, #0fb4e7);background-image: -o-linear-gradient(#a9e4f7, #0fb4e7);background-image: -ms-linear-gradient(#a9e4f7, #0fb4e7);background-image: linear-gradient(#a9e4f7, #0fb4e7);}SCSSCSS
  21. 21. 21MêmeIE ?
  22. 22. 22• seulement 9 règlescommunes à IE 8 et IE 7• aux-quelles s’ajoutent 19règles correctrices pour IE 7• un gain de tempsconsidérable !Pour une CSS de727 règles
  23. 23. Pièges à éviter
  24. 24. Ordre de déclarationdes variables$content-width: 960px !default;$sidebar-width: 250px !default;$main-width: $content-width - $sidebar-width !default; // Soit 710px par défaut.@import "partials/grid";// La variable $sidebar-width est re-définie.// $main-width vaudra toujours 710px au lieu de 660px.$sidebar-width: 300px;_grid.scss_base.scss
  25. 25. Ordre de déclarationdes variables$content-width: 960px !default;$sidebar-width: 250px !default;$main-width: $content-width - $sidebar-width !default; // Soit 710px par défaut.// La variable $sidebar-width est re-définie selon nos besoins.$sidebar-width: 300px;// Puis le fichier partiel est chargé.// La variable $main-width est correctement calculée (960px - 300px = 660px).@import "partials/grid";_grid.scss_base.scss
  26. 26. CSS non compressé• une tierce personne peut aisément éditer la feuillede style non compressé• sans forcément reporter les éditions dans lasource SassConseil : commitez une version compressée de vosfeuilles de style en plus du projet Sass.
  27. 27. Déléguer la compilation• exit la délégation d’une unique compilation sur leserveur• développeurs, vous commiteriez un code nontesté ?• je ne pense pas ;-)• faîtes en de même avec vos CSS !Conseil : compilez sur votre poste de travail avant decommiter. Ne pas se contenter d’une compilationserveur.
  28. 28. Questions ?
  29. 29. Liens• http://pioupioum.fr/compass-sauvez-integrateur/• http://fr.slideshare.net/stubbornella/object-oriented-css• http://smacss.com• http://bem.info• http://compass-style.org/reference/compass/
  30. 30. Crédits photoshttp://www.flickr.com/photos/le_piaf_fou/3300132175/http://www.flickr.com/photos/dkdlv38/6783839447http://backgroundsdesktop.org/star_wars_its_a_trap_wallpapers-backgrounds_desktop.html

×