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