Initiation à Sass, Compass et Susy

Démonstration de l’utilité et de la facilité d’utilisation du préprocesseur CSS SASS, du framework Compass et de son plugin de grilles Susy.

À travers des exemples concrets, nous passerons en revue les opérations simples permettant de programmer une feuille de style rapidement et proprement.

Cette présentation intéressera les intégrateurs souhaitant industrialiser leur production, les graphistes désirant s’essayer au prototypage rapide sur navigateur, et les développeurs à qui les CSS donnent la migraine.

Transcript

1. Initiation à Sass, Compass et Susy Pierre-Emmanuel Fringant http://www.formation-cakephp.com @pefringant
2. Les outils
3. SASS • Scss, langage de programmation de Css • Préprocesseur : Scss => Css • Gère les erreurs de validation
4. Import de fichiers • Séparation libre du code dans plusieurs fichiers • Composants réutilisables • = un seul fichier CSS produit scss/ partials/ _base.scss _layout.scss @import "partials/base"; @import "partials/layout";
5. Imbrication des sélecteurs .gallery { a { color: red; img { border: 1px solid black; } } } .gallery a { color: red; } .gallery a img { border: 1px solid black; } SCSS CSS
6. Variables $main-color: #0088CC; h1 { color: $main-color; } h1 { color: #0088CC; } SCSS CSS
7. Fonctions h2 { color: lighten(#0088CC, 15%); } h2 { color: #1AB2FF; } SCSS CSS
8. Opérations $site-width: 960px; $content-width: 640px; #sidebar { width: $siteWidth - $contentWidth; } SCSS #sidebar { width: 320px; } CSS
9. Référence au parent a { color: blue; &:hover { color: red; } } SCSS a { color: blue; } a:hover { color: red; } CSS
10. Extend %message { font-weight: bold; } .notice { @extend %message; font-size: 2em; } .error { @extend %message; color: red; } SCSS .notice { font-weight: bold; font-size: 2em; } .error { font-weight: bold; color: red; } CSS
11. Mixins @mixin rounded-box($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .big-box { @include rounded-box(20px); } SCSS .big-box { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } CSS
12. Mixins Paramètres par défaut @mixin rounded-box($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .standard-box { @include rounded-box(); } SCSS .standard-box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } CSS
13. Mixins Paramètres nommés box-shadow: 2px 1px 0 black; CSS @include single-box-shadow($voff: 1px, $color: black, $hoff: 2px); SCSS
14. Media queries .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } SCSS @media screen and (orientation: landscape) { .sidebar { width: 500px; } } .sidebar { width: 300px; } CSS
15. • Framework pour Sass • Bibliothèque de mixins Sass • Plusieurs environnements • Extensible par des plugins • Projet suivi et communauté riche
16. Mixins Scss • Reset • CSS3 • Sprites • Typographie (rythme vertical)
17. CSS3 • Indépendant des préfixes (-webkit, -moz, ...) .rounded-box { @include border-radius(5px); } SCSS .rounded-box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } CSS
18. CSS3 • border radius • gradient • transform • animations • opacity • text shadow • box shadow • etc...
19. Rythme vertical html { font-size: 16px; line-height: 1.5em; } CSS • Définition de la hauteur de ligne @import "compass/typography"; @include establish-baseline(16px); SCSS
20. Rythme vertical
21. Rythme vertical h1 { font-size: 1.5em; // 1.5 = 24 / 16 line-height: 2em; // 2 = 3 / 1.5 } CSS • Les autres définitions de taille seront relatives à cette valeur h1 { @include adjust-font-size-to(24px); } SCSS
22. Rythme vertical h2 { font-size: 1.375em; // 1.375 = 22 / 16 line-height: 2.18182em; // 2.18182 = 3 / 1.375 } CSS h2 { @include adjust-font-size-to(22px); } SCSS
23. Sprites images/ actions/ new.png edit.png save.png delete.png @import "actions/*.png"; @include all-actions-sprites; SCSS
24. Sprites .actions-sprite, .actions-delete, .actions-edit, .actions-new, .actions-save { background: url('/images/actions-s34fe0604ab.png') no- repeat; } .actions-delete { background-position: 0 0; } .actions-edit { background-position: 0 -32px; } .actions-new { background-position: 0 -64px; } .actions-save { background-position: 0 -96px; } CSS
25. Sprites retina @import "retina-sprites"; $sprites: sprite-map("sprites/*.png"); $sprites2x: sprite-map("sprites2x/*.png"); .ico-facebook { @include retina-sprite(facebook, png); } SCSS github.com/AdamBrodzinski/Retina-Sprites-for-Compass
26. Environnements • Développement : commentaires automatiques
27. Environnements • Production : compact, strict minimum
28. • Plugin de grilles pour Compass • Gestion des breakpoints pour le responsive • Idéal pour un design "mobile first"
29. Initialiser Susy • Définir la grille @import "susy"; $total-columns: 7; $column-width: 4em; $gutter-width: 1em; $grid-padding: 0; $container-style: fluid; .page { @include container; @include susy-grid-background; } SCSS
30. Grille de base
31. Breakpoints $tablet-portrait: 8; $tablet-landscape: 10; .page { @include container; @include susy-grid-background; } @include at-breakpoint($tablet-portrait) { .page { @include container; @include susy-grid-background; } } SCSS
32. Breakpoints
33. Breakpoints $tablet-portrait: 8; $tablet-landscape: 10; .page {...} @include at-breakpoint($tablet-portrait) { .page {...} } @include at-breakpoint($tablet-landscape) { .page { @include container; @include susy-grid-background; } } SCSS
34. Breakpoints
35. Exemple <div class="features"> <div class="row"> <div class="feature">...</div> <div class="feature">...</div> </div> <div class="row"> <div class="feature">...</div> <div class="feature">...</div> </div> </div> HTML • Une liste de 4 éléments
36. Exemple sur les 3 breakpoints 7 colonnes 8 colonnes 10 colonnes
37. Breakpoint 7 colonnes .features { @include span-columns($total-columns omega); .feature { @include span-columns($total-columns omega); } } SCSS
38. Breakpoint 8 colonnes @include at-breakpoint($tablet-landscape) { .features { .row { @include span-columns($total-columns omega); .feature { @include span-columns($total-columns / 2); @include nth-omega(2n); } } } } SCSS
39. Breakpoint 10 colonnes @include at-breakpoint($tablet-portrait) { .features { .row:first-child { @include span-columns($total-columns / 2); } .row:last-child { @include span-columns(($total-columns / 2) omega); } } } SCSS
40. Installer Compass • GUI complet http://mhs.github.com/scout-app (Gratuit - Mac, Windows) http://compass.handlino.com (10$ - Mac, Linux, Windows) • En ligne de commande Mac et Linux $ gem update --system $ gem install compass • Windows Installer Ruby for Windows http://rubyinstaller.org $ gem install compass
41. Créer un projet Compass • Nouveau projet $ compass create <nouveau_projet> • Projet existant $ cd <projet_existant> $ compass install compass
42. Travailler avec Compass $ cd <projet> $ compass watch
43. Installer Susy • Installer la Gem ruby $ gem install susy • Ajouter dans le fichier config.rb de Compass require "susy"
44. Conclusion • Facile à installer • Facile à utiliser • Profiter de toutes les fonctionnalités avancées de CSS sans la complexité de leur syntaxe • Possible de commencer en CSS pur et d'introduire du Sass petit à petit
45. Des questions ? pierre.fringant@gmail.com http://www.formation-cakephp.com @pefringant