Sass et Compass ont embelli mon quotidien, Sud Web 2013

Sass et Compass
ont embelli mon quotidien

• 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)

Avant Sass
• un unique document CSS à rallonge
• chaque intervenant ajoute sa pierre à
l’édiﬁce, 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 identiﬁables
• un regroupement naturel par
composants graphiques

Avec Sass
• un document structuré
• des rôles identiﬁables
• un regroupement naturel par
composants graphiques
• une organisation eﬃcace

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éﬁxe 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

$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

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

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.

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.ﬂickr.com/photos/le_piaf_fou/3300132175/
http://www.ﬂickr.com/photos/dkdlv38/6783839447
http://backgroundsdesktop.org/star_wars_its_a_trap_wallpapers-backgrounds_desktop.html

Sass et Compass ont embelli mon quotidien, Sud Web 2013

Diaporamas connexes

Recommandé pour vous

Recommandé pour vous

Recommandé pour vous

Recommandé pour vous

Recommandé pour vous

Recommandé pour vous

Recommandé pour vous

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à Sass et Compass ont embelli mon quotidien, Sud Web 2013

Similaire à Sass et Compass ont embelli mon quotidien, Sud Web 2013 (20)

Dernier

Dernier (8)

Sass et Compass ont embelli mon quotidien, Sud Web 2013