Sass et Compass ont embelli mon quotidien, Sud Web 2013

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.

Transcript

1. Sass et Compass ont embelli mon quotidien
2. Compass Sass CSS
3. • d’organisation modulaire • de documentation • de compatibilité multi-navigateurs • de pièges à éviter Nous parlerons
4. • de la syntaxe Sass • de plugins (Susy, 960gs, etc) • de la Grande question sur la vie, l’univers et le reste Mais pas
5. Mehdi Kabab @piouPiouM mehdikabab Développeur Web
6. Mehdi Kabab @piouPiouM mehdikabab Auteur Sass & Compass avancé Optimiser ses feuilles de style CSS (2013)
7. Organisation modulaire
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 It Simple, Stupid)
9. Intervenir sur ce projet ? Plus jamais !
10. Avec Sass • un document structuré • des rôles identifiables • un regroupement naturel par composants graphiques
11. Avec Sass • un document structuré • des rôles identifiables • un regroupement naturel par composants graphiques • une organisation efficace
12. Incite à penser objet
13. Un code réutilisable
14. Documenter sans crainte
15. CSS, un triste constat • rares sont les projets CSS pourvus de vrais commentaires 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- sur certaines classes
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 n'auront d'effet que dans l'affichage // 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 l'affiche desktop. // Masquer un texte. .h, .mob-h { @include hide-text; display: none; } // Empêcher iOS d'effectuer 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. • non générés dans la sortie CSS • visibles uniquement par les intervenants du projets • fini la concession entre le poids de fichier final et le poids des commentaires Commentaires Sass
18. Être compatible
19. CSS3 facile
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,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3Lncz Lm9yZy8yMDAwL3N2ZyI+PGRlZnM +PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0 iMTAwJSI +PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBmYjRlNyIvPjwvbGl uZWFyR3JhZGllbnQ +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); } SCSS CSS
21. 21 Même IE ?
22. 22 • seulement 9 règles communes à IE 8 et IE 7 • aux-quelles s’ajoutent 19 règles correctrices pour IE 7 • un gain de temps considérable ! Pour une CSS de 727 règles
23. Pièges à éviter
24. Ordre de déclaration des 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. Ordre de déclaration des 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. CSS non compressé • une tierce personne peut aisément éditer la feuille de style non compressé • sans forcément reporter les éditions dans la source Sass Conseil : commitez une version compressée de vos feuilles de style en plus du projet Sass.
27. Déléguer la compilation • exit la délégation d’une unique compilation sur le serveur • développeurs, vous commiteriez un code non testé ? • je ne pense pas ;-) • faîtes en de même avec vos CSS ! Conseil : compilez sur votre poste de travail avant de commiter. Ne pas se contenter d’une compilation serveur.
28. Questions ?
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. Crédits photos http://www.flickr.com/photos/le_piaf_fou/3300132175/ http://www.flickr.com/photos/dkdlv38/6783839447 http://backgroundsdesktop.org/star_wars_its_a_trap_wallpapers-backgrounds_desktop.html