Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Initiation à Sass, Compass
    et Susy
    Pierre-Emmanuel Fringant
    http://www.formation-cakephp.com
    @pefringant

    View full-size slide

  2. SASS
    ● Scss, langage de programmation de Css
    ● Préprocesseur : Scss => Css
    ● Gère les erreurs de validation

    View full-size slide

  3. 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";

    View full-size slide

  4. 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

    View full-size slide

  5. Variables
    $main-color: #0088CC;
    h1 {
    color: $main-color;
    }
    h1 {
    color: #0088CC;
    }
    SCSS
    CSS

    View full-size slide

  6. Fonctions
    h2 {
    color: lighten(#0088CC, 15%);
    }
    h2 {
    color: #1AB2FF;
    }
    SCSS
    CSS

    View full-size slide

  7. Opérations
    $site-width: 960px;
    $content-width: 640px;
    #sidebar {
    width: $siteWidth - $contentWidth;
    }
    SCSS
    #sidebar {
    width: 320px;
    }
    CSS

    View full-size slide

  8. Référence au parent
    a {
    color: blue;
    &:hover {
    color: red;
    }
    }
    SCSS
    a { color: blue; }
    a:hover { color: red; }
    CSS

    View full-size slide

  9. 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

    View full-size slide

  10. 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

    View full-size slide

  11. 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

    View full-size slide

  12. Mixins Paramètres nommés
    box-shadow: 2px 1px 0 black; CSS
    @include single-box-shadow($voff: 1px, $color: black,
    $hoff: 2px);
    SCSS

    View full-size slide

  13. 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

    View full-size slide

  14. ● Framework pour Sass
    ● Bibliothèque de mixins Sass
    ● Plusieurs environnements
    ● Extensible par des plugins
    ● Projet suivi et communauté riche

    View full-size slide

  15. Mixins Scss
    ● Reset
    ● CSS3
    ● Sprites
    ● Typographie (rythme vertical)

    View full-size slide

  16. 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

    View full-size slide

  17. CSS3
    ● border radius
    ● gradient
    ● transform
    ● animations
    ● opacity
    ● text shadow
    ● box shadow
    ● etc...

    View full-size slide

  18. 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

    View full-size slide

  19. Rythme vertical

    View full-size slide

  20. 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

    View full-size slide

  21. 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

    View full-size slide

  22. Sprites
    images/
    actions/
    new.png
    edit.png
    save.png
    delete.png
    @import "actions/*.png";
    @include all-actions-sprites;
    SCSS

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

  25. Environnements
    ● Développement : commentaires automatiques

    View full-size slide

  26. Environnements
    ● Production : compact, strict minimum

    View full-size slide

  27. ● Plugin de grilles pour Compass
    ● Gestion des breakpoints pour le responsive
    ● Idéal pour un design "mobile first"

    View full-size slide

  28. 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

    View full-size slide

  29. Grille de base

    View full-size slide

  30. 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

    View full-size slide

  31. 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

    View full-size slide

  32. Exemple


    ...
    ...


    ...
    ...


    HTML
    ● Une liste de 4 éléments

    View full-size slide

  33. Exemple sur les 3 breakpoints
    7 colonnes 8 colonnes 10 colonnes

    View full-size slide

  34. Breakpoint 7 colonnes
    .features {
    @include span-columns($total-columns omega);
    .feature {
    @include span-columns($total-columns omega);
    }
    }
    SCSS

    View full-size slide

  35. 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

    View full-size slide

  36. 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

    View full-size slide

  37. 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

    View full-size slide

  38. Créer un projet Compass
    ● Nouveau projet
    $ compass create
    ● Projet existant
    $ cd
    $ compass install compass

    View full-size slide

  39. Travailler avec Compass
    $ cd
    $ compass watch

    View full-size slide

  40. Installer Susy
    ● Installer la Gem ruby
    $ gem install susy
    ● Ajouter dans le fichier config.rb de Compass
    require "susy"

    View full-size slide

  41. 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

    View full-size slide

  42. Des questions ?
    [email protected]
    http://www.formation-cakephp.com
    @pefringant

    View full-size slide