Inté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
OUTILS
Rappel
http://www.flickr.com/photos/jannem/3312116875/ (cc)

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 afﬁcher 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
COMPASS
Un
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,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

// 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: -moz-box;
display: flex;
}
.col {
background: #ccc;
padding: 30px;
}
.fluid {
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.fixed {
background: red;
width: 400px;
}
CSS
Flexbox, ancienne syntaxe

.grid {
display: -moz-box;
display: flex;
}
.col {
background: #ccc;
padding: 30px;
}
.fluid {
-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éﬁnition
@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;
}
}

Sprites
Haute Déﬁnition
Résultat obtenu

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.

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

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

Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

Contenu connexe

Tendances

Similaire à Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013

Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013