$30 off During Our Annual Pro Sale. View Details »

Initiation à Sass, Compass et Susy

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.

Pierre-Emmanuel Fringant

January 31, 2013
Tweet

More Decks by Pierre-Emmanuel Fringant

Other Decks in Design

Transcript

  1. SASS • Scss, langage de programmation de Css • Préprocesseur

    : Scss => Css • Gère les erreurs de validation
  2. 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";
  3. 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
  4. Référence au parent a { color: blue; &:hover { color:

    red; } } SCSS a { color: blue; } a:hover { color: red; } CSS
  5. 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
  6. 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
  7. 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
  8. Mixins Paramètres nommés box-shadow: 2px 1px 0 black; CSS @include

    single-box-shadow($voff: 1px, $color: black, $hoff: 2px); SCSS
  9. 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
  10. • Framework pour Sass • Bibliothèque de mixins Sass •

    Plusieurs environnements • Extensible par des plugins • Projet suivi et communauté riche
  11. 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
  12. CSS3 • border radius • gradient • transform • animations

    • opacity • text shadow • box shadow • etc...
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. • Plugin de grilles pour Compass • Gestion des breakpoints

    pour le responsive • Idéal pour un design "mobile first"
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. Créer un projet Compass • Nouveau projet $ compass create

    <nouveau_projet> • Projet existant $ cd <projet_existant> $ compass install compass
  27. Installer Susy • Installer la Gem ruby $ gem install

    susy • Ajouter dans le fichier config.rb de Compass require "susy"
  28. 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