Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
-
Upload
mehdi-kabab -
Category
Technology
-
view
6.078 -
download
0
description
Transcript of 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
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