SlideShare une entreprise Scribd logo
Sass et Compass
ont 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
Documenter
sans 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,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
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 de
727 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

Contenu connexe

Tendances

Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB
13p
 

Tendances (18)

HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
WordPress et Ninja forms
WordPress et Ninja formsWordPress et Ninja forms
WordPress et Ninja forms
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
 
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas HoffmannLes Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
 
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
Les clés pour réussir son site WordPress - SeoMix au WordCamp Paris 2016
 
Nettoyage de printemps SEO pour WordPress
Nettoyage de printemps SEO pour WordPressNettoyage de printemps SEO pour WordPress
Nettoyage de printemps SEO pour WordPress
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
WordPress & les contributions — WordCamp Paris 2016
WordPress & les contributions — WordCamp Paris 2016WordPress & les contributions — WordCamp Paris 2016
WordPress & les contributions — WordCamp Paris 2016
 
CSS3 - Possibilite creatives
CSS3 - Possibilite creativesCSS3 - Possibilite creatives
CSS3 - Possibilite creatives
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
 
CSS3 WebEducation
CSS3 WebEducationCSS3 WebEducation
CSS3 WebEducation
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 

En vedette

Un estudio psicoanalítico sobre la relación líder
Un estudio psicoanalítico sobre la relación líderUn estudio psicoanalítico sobre la relación líder
Un estudio psicoanalítico sobre la relación líder
Recursos Cristianos. Org
 
Transparent x opaque
Transparent x opaqueTransparent x opaque
Transparent x opaque
Maha Hussain
 
Furia da natureza
Furia da naturezaFuria da natureza
Furia da natureza
JNR
 

En vedette (20)

Sistema de prevención de corrupción en el sector privado de Chile
Sistema de prevención de corrupción en el sector privado de ChileSistema de prevención de corrupción en el sector privado de Chile
Sistema de prevención de corrupción en el sector privado de Chile
 
La veille de né kid du 07.07.10 : la contrefaçon
La veille de né kid du 07.07.10 : la contrefaçonLa veille de né kid du 07.07.10 : la contrefaçon
La veille de né kid du 07.07.10 : la contrefaçon
 
Etude Leaders League / Stratégies des entreprises de croissance
Etude Leaders League / Stratégies des entreprises de croissanceEtude Leaders League / Stratégies des entreprises de croissance
Etude Leaders League / Stratégies des entreprises de croissance
 
IntroStatBayes_chap1
IntroStatBayes_chap1IntroStatBayes_chap1
IntroStatBayes_chap1
 
10 Lessons_SD
10 Lessons_SD10 Lessons_SD
10 Lessons_SD
 
Observatorios al Concejo de Barranquilla y la Asamblea del Atlántico
Observatorios al Concejo de Barranquilla y la Asamblea del Atlántico Observatorios al Concejo de Barranquilla y la Asamblea del Atlántico
Observatorios al Concejo de Barranquilla y la Asamblea del Atlántico
 
Google Apps pour votre entreprise
Google Apps pour votre entrepriseGoogle Apps pour votre entreprise
Google Apps pour votre entreprise
 
Segunda Semana Clase Virtual
Segunda Semana Clase VirtualSegunda Semana Clase Virtual
Segunda Semana Clase Virtual
 
Ibm academic initiative for cloud
Ibm academic initiative for cloud Ibm academic initiative for cloud
Ibm academic initiative for cloud
 
Derecho
DerechoDerecho
Derecho
 
Respuesta a las
Respuesta a lasRespuesta a las
Respuesta a las
 
Un estudio psicoanalítico sobre la relación líder
Un estudio psicoanalítico sobre la relación líderUn estudio psicoanalítico sobre la relación líder
Un estudio psicoanalítico sobre la relación líder
 
500 ilustracions completo copia
500 ilustracions completo copia500 ilustracions completo copia
500 ilustracions completo copia
 
La Veille de Né Kid Du 25 02 10 : le halal
La Veille de Né Kid Du 25 02 10 : le halalLa Veille de Né Kid Du 25 02 10 : le halal
La Veille de Né Kid Du 25 02 10 : le halal
 
Transparent x opaque
Transparent x opaqueTransparent x opaque
Transparent x opaque
 
Neww
NewwNeww
Neww
 
EL COMPUTADOR UNIDAD1
EL COMPUTADOR UNIDAD1EL COMPUTADOR UNIDAD1
EL COMPUTADOR UNIDAD1
 
Furia da natureza
Furia da naturezaFuria da natureza
Furia da natureza
 
La Guerra Fria
La Guerra FriaLa Guerra Fria
La Guerra Fria
 
Tics como recurso didáctico
Tics como recurso didácticoTics como recurso didáctico
Tics como recurso didáctico
 

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

Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
Ouadie LAHDIOUI
 

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

SASS
SASSSASS
SASS
 
Css maintenable - Morgane Hervé
Css maintenable - Morgane HervéCss maintenable - Morgane Hervé
Css maintenable - Morgane Hervé
 
Systematic, toolchain JS
Systematic, toolchain JSSystematic, toolchain JS
Systematic, toolchain JS
 
Un rythme pour les gouverner tous !
Un rythme pour les gouverner tous !Un rythme pour les gouverner tous !
Un rythme pour les gouverner tous !
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
 
CSS3 - nouveautes
CSS3 - nouveautesCSS3 - nouveautes
CSS3 - nouveautes
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travail
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 

Sass et Compass ont embelli mon quotidien, Sud Web 2013

  • 1. Sass et Compass ont embelli mon quotidien
  • 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
  • 6. Mehdi Kabab @piouPiouM mehdikabab Auteur Sass & Compass avancé Optimiser ses feuilles de style CSS (2013)
  • 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
  • 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
  • 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
  • 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
  • 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.
  • 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/