Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?

1. INTÉGRATEUR WEB
BLEND
WEB MIX
http://www.flickr.com/photos/uniquehotelsgroup/5689788783/ (cc)
Aime
Sass
pour
ton
bien
#sass #BlendWebMix

2. SASS ET COMPASS
NE SONT QUE DES
OUTILS
Rappel
http://www.flickr.com/photos/jannem/3312116875/ (cc)

4. IL N’EN RESTERA
QU’UN !

5. SYNTAXE CSS
ENRICHIE
✓ variables
✓ règles
imbriquées
✓ structures
de
contrôle
✓ automa:sa:on
✓ …
http://www.flickr.com/photos/edwarddalmulder/3635432458/ (cc)

6. Rechercher / remplacer,
c’est mon dada.
– Personne. Jamais.

7. Déclinaison rapide
$font-color: #3F3828 !default;
$header-color: #4F4736 !default;
$important-color: #7B9600 !default;
$loud-color: #3F3828 !default;
$quiet-color: #666 !default;
$ultra-quiet-color: #9E988C !default;
$alt-text-color: #4F4736 !default;
$highlight-color: #FF7100 !default;
$link-color: #7B9600 !default;
$footer-color: #4D4535 !default;
$footer-title-color: #7B9600 !default;
…
_theme.scss
@import "partials/subtheme";
@import "partials/theme";
styles.scss
$subtheme-color: #FF4E00 !default;
$subtheme-color-lighter: #FFB011 !default;
$link-color: $subtheme-color !default;
$highlight-color: $subtheme-color !default;
$footer-title-color: $subtheme-color !default;
$subtitle-color: $subtheme-color !default;
$nav-submenu-link-color: $subtheme-color !default;
$webform-green: $subtheme-color !default;
$webform-grey: #f2f2f2 !default;
$webform-brown: #3a3321 !default;
$webform-shadow-color: #888 !default;
$webform-action-color: #fff !default;
$webform-action-gradient-start: #ff940b !default;
$webform-action-gradient-end: #f56000 !default;
$webform-action-border-color: darken($webform-action-gradient-end, 5%) !default;
_subtheme.scss

8. Écrire 50 fois le même
sélecteur CSS, c’est ma
passion. – Personne. Jamais.

9. Partenariat
#my-biz {
@import "partials/general/*";
@import "partials/ui/*";
@import "partials/content-types/*";
}
• des partenaires souhaitent afficher un
décors de page à leurs couleurs
• ils fournissent, voire chargent des CSS avec
de belles règles, comme * { line-height:1 }
• vous n’avez pas d’autre choix que
d’augmenter le poids de tous vos
sélecteurs

10. Dis voir, comment je fais pour
afficher le logo anglais pour
la pologne ?
– Un chef de projet.
Facile, ajoute pl en dans la
variable de configuration
dédiée du thème.
– Moi.

11. Automatisation
$logo-supported_languages: fr, en, es, it, de en, pl en !default;
// La page d'accueil doit afficher un logo contextualisé par la langue.
.node-type-homepage {
@each $logo-supported_language in $logo-supported_languages {
$language: $logo-supported_language;
$locale: $logo-supported_language;
// Cas particulier d'une langue qui doit afficher le logo d'une autre langue.
@if type-of($logo-supported_language) == 'list' {
// La langue de l'utilisateur.
$language: nth($logo-supported_language, 1);
// La locale à utiliser pour afficher le logo.
$locale: nth($logo-supported_language, 2);
}
// Chemins localisés du logo.
$logo-path: 'locales/#{$locale}/logo';
&.i18n-#{$language} .logo {
@include iu-hidpi-replace-text-with-dimensions($logo-path);
}
}
}

12. ÉCONOMISER DES
HEURES DE
TRAVAIL AVEC
COMPASS
Un
support
cross-­‐browser
avancé
http://www.flickr.com/photos/bermilabs/4078706331/ (cc)

13. Dans la vraie vie
• 1 site multi-domaines, 2 langues,
5 thèmes
• 398 Ko de CSS au total
• dont 10 Ko pour un support IE7+ via des
feuilles de styles dédiés

14. Dans la vraie vie, #2
• 1 site multi-lingues, 2 thèmes
• 90.3 Ko de CSS au total
• dont 2.3 Ko pour un support IE7+ via des
feuilles de styles dédiés

15. MERCI COMPASS
POUR TES
MIXINS !
http://www.flickr.com/photos/meddygarnet/4232411010/ (cc)

16. $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: url('data:image/svg
+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJod
HRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM
+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4
Mj0iNTAlIiB5Mj0iMTAwJSI
+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBm
YjRlNyIvPjwvbGluZWFyR3JhZGllbnQ
+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9z
dmc+IA==');
background: -webkit-linear-gradient(#a9e4f7, #0fb4e7);
background: -moz-linear-gradient(#a9e4f7, #0fb4e7);
background: -o-linear-gradient(#a9e4f7, #0fb4e7);
background: linear-gradient(#a9e4f7, #0fb4e7);
}
SCSS
CSS

17. // Activer le fallback de la syntaxe de 2009.
$flex-legacy-enabled: true;
@import "compass/css3/flexbox";
.grid {
@include display-flex;
@include flex-direction(column-reverse);
}
.col {
background: #ccc;
padding: 30px;
}
.fluid {
@include flex(1);
}
.fixed {
background: red;
width: 400px;
}
SCSS
Flexbox facile
Attention :
Ce code requiert Compass 0.13.alpha au minimun.

18. .grid {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.col {
background: #ccc;
padding: 30px;
}
.fluid {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.fixed {
background: red;
width: 400px;
}
CSS
Flexbox facile

19. .grid {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.col {
background: #ccc;
padding: 30px;
}
.fluid {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.fixed {
background: red;
width: 400px;
}
CSS
Flexbox, ancienne syntaxe

20. .grid {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.col {
background: #ccc;
padding: 30px;
}
.fluid {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.fixed {
background: red;
width: 400px;
}
CSS
Flexbox, nouvelle syntaxe

21. ET SI JE VOUS
DISAIS QUE JE
GÈRE ET CRÉE
MES SPRITES CSS
EN QUELQUES
SECONDES ?
http://www.flickr.com/photos/dark_ghetto28/385574568/ (cc)

22. Sprites, strict minimum
@import "compass";
// Importation de la sprite map.
@import "social/*.png";
// Création de l'image de sprite map et des sprites CSS.
@include all-social-sprites;
SCSS
.social-sprite, .social-googleplus, .social-linkedin, .social-twitter {
background-image: url('../img/social-s4363aa6d7e.png');
background-repeat: no-repeat;
}
.social-googleplus { background-position: 0 0; }
.social-linkedin { background-position: 0 -48px; }
.social-twitter { background-position: 0 -96px; }
CSS

23. Sprites Haute Définition
@import "compass";
// Configuration de la sprite map basique.
$social-sprite-base-class: '%social_base';
$social-layout: smart;
$social-sort-by: name;
$social-sprite-dimensions: true;
// Importation de la sprite map basique.
@import "social/*.png";
// Création de l'image de sprite map et des sprites CSS.
@include all-social-sprites;
// Déclaration de la version HD en reprennant les mêmes layout et tri
// que la sprite map basique
$social_hd-sprites: sprite-map("social_x2/*.png",
$layout: $social-layout,
$sort-by: $social-sort-by);
// Une gestion HD en quelques lignes.
#{$social-sprite-base-class} {
@include hide-text;
display: block;
@media (-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi),
(min-resolution: 1.3dppx) {
background-image: $social_hd-sprites;
background-size: sprite-width($social-sprites) auto;
}
}

24. Sprites
Haute Définition
Résultat obtenu

25. Sprites HD
dans le désordre
Avec Compass, il est tout à fait
possible de gérer des sprites map qui
ne présentent pas le même ordre.

26. Le code pique un peu,
mais c’est faisable !

27. MERCI
Mehdi
Kabab
de
Clever
Age
@piouPiouM
/
@CleverAge
BLEND
WEB MIX