Sass et Compass ont embelli mon quotidien
Jul 02, 2015
Sass et Compassont embelli mon quotidien
Compass
Sass
CSS
• d’organisation modulaire
• de documentation
• de compatibilité multi-navigateurs
• de pièges à éviter
Nous parlerons
• de la syntaxe Sass
• de plugins (Susy, 960gs, etc)
• de la Grande question sur la vie, l’univers et le reste
Mais pas
Mehdi Kabab
@piouPiouM
mehdikabab
Développeur Web
Mehdi Kabab
@piouPiouM
mehdikabab
Auteur
Sass & Compass avancéOptimiser ses feuilles de style CSS(2013)
Organisation modulaire
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)
Intervenir sur ce projet ?Plus jamais !
Avec Sass
• un document structuré
• des rôles identifiables
• un regroupement naturel par composants graphiques
Avec Sass
• un document structuré
• des rôles identifiables
• un regroupement naturel par composants graphiques
• une organisation efficace
Incite à penser objet
Un code réutilisable
Documentersans crainte
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
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);}
• 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
Être compatible
CSS3 facile
$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);}
SCSS
CSS
21
Même IE ?
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 de727 règles
Pièges à éviter
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
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
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.
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.
Questions ?
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/
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