Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

description

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 ?

Transcript of Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

Page 1: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

INTÉGRATEUR WEB

BLEND WEB MIX

http://www.flickr.com/photos/uniquehotelsgroup/5689788783/ (cc)

Aime  Sass  pour  ton  bien

#sass #BlendWebMix

Page 2: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

SASS ET COMPASS NE SONT QUE DES OUTILSRappel

http://www.flickr.com/photos/jannem/3312116875/ (cc)

Page 3: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Page 4: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

IL N’EN RESTERA QU’UN !

Page 5: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

SYNTAXE CSS ENRICHIE✓ variables✓ règles  imbriquées✓ structures  de  contrôle

✓ automa:sa:on✓ …

http://www.flickr.com/photos/edwarddalmulder/3635432458/ (cc)

Page 6: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

Rechercher / remplacer, c’est mon dada.

– Personne. Jamais.

Page 7: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

Page 8: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

– Personne. Jamais.

Page 9: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

Page 10: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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.

Page 11: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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); } }}

Page 12: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

ÉCONOMISER DES HEURES DE TRAVAIL AVEC COMPASSUn  support  cross-­‐browser  avancé

http://www.flickr.com/photos/bermilabs/4078706331/ (cc)

Page 13: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

Page 14: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

Page 15: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

MERCI COMPASS POUR TES MIXINS !

http://www.flickr.com/photos/meddygarnet/4232411010/ (cc)

Page 16: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

$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,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBmYjRlNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+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

Page 17: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

// 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.

Page 18: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

.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

Page 19: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

.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

Page 20: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

.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

Page 21: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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)

Page 22: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

Page 23: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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; }}

Page 24: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

SpritesHaute Définition

Résultat obtenu

Page 25: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

Sprites HDdans 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.

Page 26: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

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

Page 27: Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

MERCIMehdi  Kabab  de  Clever  Age@piouPiouM  /  @CleverAge

BLEND WEB MIX