Upload
mehdi-kabab
View
6.081
Download
0
Embed Size (px)
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 ?
Citation preview
INTÉGRATEUR WEB
BLEND WEB MIX
http://www.flickr.com/photos/uniquehotelsgroup/5689788783/ (cc)
Aime Sass pour ton bien
#sass #BlendWebMix
SASS ET COMPASS NE SONT QUE DES OUTILSRappel
http://www.flickr.com/photos/jannem/3312116875/ (cc)
IL N’EN RESTERA QU’UN !
SYNTAXE CSS ENRICHIE✓ variables✓ règles imbriquées✓ structures de contrôle
✓ automa:sa:on✓ …
http://www.flickr.com/photos/edwarddalmulder/3635432458/ (cc)
Rechercher / remplacer, c’est mon dada.
– Personne. Jamais.
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
Écrire 50 fois le même sélecteur CSS, c’est ma passion.
– Personne. Jamais.
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
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.
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); } }}
ÉCONOMISER DES HEURES DE TRAVAIL AVEC COMPASSUn support cross-‐browser avancé
http://www.flickr.com/photos/bermilabs/4078706331/ (cc)
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
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
MERCI COMPASS POUR TES MIXINS !
http://www.flickr.com/photos/meddygarnet/4232411010/ (cc)
$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
// 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.
.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
.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
.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
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)
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
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; }}
SpritesHaute Définition
Résultat obtenu
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.
Le code pique un peu, mais c’est faisable !
MERCIMehdi Kabab de Clever Age@piouPiouM / @CleverAge
BLEND WEB MIX