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

Sass, pratique tout de suite

Sass, pratique tout de suite

Slides du lab' au BreizhCazmp 24/03/16

Alvin Berthelot

March 24, 2016
Tweet

More Decks by Alvin Berthelot

Other Decks in Programming

Transcript

  1. 1. playground.sass.js.zip 2. cd playground.sass.js/dist 3. Démarrer un serveur http

    python -m SimpleHTTPServer 8000 Avant de démarrer ... www.webyousoon.com @webyousoon 4
  2. C’est quoi un préprocesseur CSS ? Un métalangage. Un outil

    pour produire et maintenir des feuilles de styles CSS. Pas de nouvelles possibilités. Vous devez comprendre CSS. www.webyousoon.com @webyousoon 6
  3. Pourquoi un préprocesseur CSS ? CSS reste le roi de

    la mise en forme, mais … Structuration du code. Dépendances de mises en forme. Tâches répétitives. www.webyousoon.com @webyousoon 7
  4. Introduction Sass supporte 2 syntaxes : - .sass : syntaxe

    basée sur les indentations. - .scss : syntaxe basée sur la syntaxe originale CSS. Transition douce avec .scss. www.webyousoon.com @webyousoon 11
  5. Imports Sass permet de découper le code source en plusieurs

    fichiers pour gagner en maintenabilité, un fichier peut en appeler un autre avec @import. Il faut bien distinguer import CSS vs Sass. Ordre des déclarations. Un fichier partiel commence par _. www.webyousoon.com @webyousoon 14
  6. Imports body { background: whitesmoke; } // Fichier contenant h1

    {color: blue;} @import "partials/typo"; www.webyousoon.com @webyousoon 15
  7. Variables Il est possible de rendre plus dynamique la génération

    de CSS avec l’utilisation de variables. Celles-ci se déclarent et s’utilisent avec le symbole $. Chaque variable peut prendre la valeur d’une propriété CSS : #9013FE, 24px, right, etc. Il existe des types de données. Il faut bien distinguer variable CSS vs Sass. www.webyousoon.com @webyousoon 16
  8. Variables // Dé claration d'une variable avec $ $purple: #9013FE;

    h1 { // Utilisation de la variable color: $purple; } www.webyousoon.com @webyousoon 17
  9. Variables .title { color: brown; font-size: 2em; padding: 24px; }

    .box { border-bottom: 1px solid brown; padding: 24px; } www.webyousoon.com @webyousoon 18
  10. Nestings Sass permet l’imbrication des sélecteurs, ceci afin de ne

    pas avoir à les répéter et ainsi gagner en productivité et en lisibilité. En imbriquant un sélecteur dans un autre, Sass les chaînera. Pour un chaînage direct, on utilisera &. Il ne faut pas non plus abuser des imbrications. www.webyousoon.com @webyousoon 19
  11. Nestings section { border: 1px solid whitesmoke; .alert { colour:

    red; } } www.webyousoon.com @webyousoon 20
  12. Nestings .promo { color: pink; } .promo a { text-decoration:

    none; } .promo a:hover { color: deeppink; } www.webyousoon.com @webyousoon 21
  13. Types de données Pour l’affectation de variable, Sass est assez

    laxiste, en fait même si on ne les déclare pas explicitement, il dispose de différents types de données qui ont leur importance : - Chaînes de caractères. - Nombres. - Couleurs. - Listes. - Maps. www.webyousoon.com @webyousoon 22
  14. Types de données $string: 'left'; $number: 1em; $colour: magenta; $list:

    (blue, white, red); $map: ( 'small': 767px, 'medium': 992px, 'large': 1200px, ); www.webyousoon.com @webyousoon 23
  15. Opérations Il est possible de réaliser des opérations sur des

    données selon leur type : - Chaînes de caractères : +. - Nombres : +, -, / et *. - Couleurs : +, -, / et *. Listes et Maps ne supportent pas d’opérations mais des fonctions. www.webyousoon.com @webyousoon 24
  16. Opérations .container { width: 768px; } .box-main { margin: 0

    10px; width: 748px; } .box-left, .box-right { margin: 0 10px; width: 364px; } www.webyousoon.com @webyousoon 26
  17. Fonctions Puisque l’on peut faire des opérations, factorisons des traitements

    avec des fonctions. Se déclare via @function myFonction(...){...} avec un return. S’utilise via myFonction(...) en retournant une unique valeur (sans effets de bords). www.webyousoon.com @webyousoon 27
  18. Fonctions @function sum($value1, $value2) { @return $value1 + $value2; }

    h1 { color: sum(blue, red); } www.webyousoon.com @webyousoon 28
  19. Fonctions .h1 { // 32px font-size: 2rem; // 18px margin-bottom:

    1.5rem; } www.webyousoon.com @webyousoon 29
  20. Fonctions natives Sass dispose déjà de nombreuse fonctions “prêtes à

    l’ emploi”. Toutes les fonctions natives sont (bien) documentées sur le site officiel de Sass. www.webyousoon.com @webyousoon 30
  21. Fonctions natives $colour: red; a { colour: darken($colour, 10); }

    a:hover { colour: lighten($colour, 10); } www.webyousoon.com @webyousoon 31
  22. Mixins Les fonctions arrivent vite à leur limite puisqu’elles ne

    peuvent retourner qu’une seule valeur. Qui plus est elles renvoient uniquement une valeur et non une association propriété / valeur. Se déclare via mixin myMixin(...){...}. S’utilise via @include myMixin(...) en retournant son contenu (sans effets de bords). www.webyousoon.com @webyousoon 32
  23. Mixins @mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

    } .teaser { @include text-truncate; width: 300px; } www.webyousoon.com @webyousoon 33
  24. Mixins .teaser img { border-radius: 50%; height: 150px; width: 150px;

    } .footer i { border-radius: 50%; height: 50px; width: 50px; } www.webyousoon.com @webyousoon 34
  25. Extends L’héritage est une alternative aux mixins, il ne va

    pas dupliquer les propriétés CSS mais les regrouper. Se déclare via @extend suivi du nom sélecteur dont l’on souhaite hériter. Il n’est pas possible d’hériter d’un sélecteur chaîné (.container h1). www.webyousoon.com @webyousoon 35
  26. Extends .info { border-radius: 4px; padding: 20px; } .alert {

    @extend .info; background: red; } www.webyousoon.com @webyousoon 36
  27. Extends .button, .button-warn, .button-success { background: white; } .button-warn {

    border: 1px solid orange; } .button-success { border: 1px solid green; } www.webyousoon.com @webyousoon 37
  28. Placeholders Il s’agit d’une variante de @extend dans le sens

    où le sélecteur dont on souhaite hériter ne sera pas généré. Se déclare via % suivi du nom sélecteur dont l’on souhaite hériter. www.webyousoon.com @webyousoon 38
  29. Placeholders %info { border-radius: 4px; padding: 20px; } .alert {

    @extend %info; background: red; } www.webyousoon.com @webyousoon 39
  30. Placeholders ul li, ol li { font-size: 1em; padding: 8px

    0; line-height: 1.5em; } ol li { color: green; } www.webyousoon.com @webyousoon 40
  31. Les arguments optionnels Pour les fonctions et les mixins il

    est possible de rendre un argument optionnel en lui spécifiant une valeur par défaut. Se déclare via : suivi de sa valeur au sein de la définition de la fonction ou du mixin. Lors de l’appel Sass fera la correspondance selon leur ordre de déclaration. Pour parer cela il faut spécifier l’argument de la même manière qu’ il est déclaré. www.webyousoon.com @webyousoon 43
  32. Les arguments optionnels @function pxtorem($val: 24px, $base: 16px) { @return

    ($val / $base) * 1rem; } h1 { margin: pxtorem(); padding-bottom: pxtorem(32px); padding-top: pxtorem($base: 32px); } www.webyousoon.com @webyousoon 44
  33. Listes d’arguments Pour les fonctions et les mixins il est

    possible de passer des listes d’arguments . Se déclare via ... après les autres arguments. Il ne peut y avoir qu’une seule liste d’arguments et il doit s’agit du dernier argument. www.webyousoon.com @webyousoon 45
  34. Listes d’arguments @mixin linear-gradient($direction, $gradients...) { background-image: linear-gradient($direction, $gradients); }

    .france { @include linear-gradient(to right, blue, white, red); } www.webyousoon.com @webyousoon 46
  35. L’interpolation Sass ne peut utiliser les variables en l’état en

    dehors des blocs de déclaration prévu à cet effet. Pour sortir du cadre, il faut passer par l’interpolation des variables qui se déclare par #{...}. www.webyousoon.com @webyousoon 47
  36. L’interpolation BodyLayout-maincontent { float: left; width: 75%; } BodyLayout-sidebar {

    float: right; width: 25%; } www.webyousoon.com @webyousoon 49
  37. Les structures de contrôle Il est possible d’utiliser les structures

    de contrôle classiques comme dans des langages dynamiques : - if, else. - for. - while. - each. www.webyousoon.com @webyousoon 50
  38. if, else @mixin contrast($colour) { @if lightness($colour) < 50% {

    color: white; } @else { color: black; } } $bg-color: green; h1 { background: $bg-color; @include contrast($bg-color); } www.webyousoon.com @webyousoon 51
  39. if, else .h3 { font-size: 3em; text-shadow: 0.3em 0.3em blue;

    } .h4 { font-size: 2.4em; text-shadow: 0.24em 0.24em blue; } .h5 { font-size: 2em; } www.webyousoon.com @webyousoon 52
  40. for @for $i from 1 through 3 { .column-#{$i} {

    width: 100% / $i; } } www.webyousoon.com @webyousoon 53
  41. for .gray-0 { color: black; } .gray-25 { color: #404040;

    } .gray-50 { color: gray; } .gray-75 { color: #bfbfbf; } .gray-100 { color: white; } www.webyousoon.com @webyousoon 54
  42. while $column: 3; @while $column > 0 { .column-#{$column} {

    width: 100% / $column; } $column: $column - 1; } www.webyousoon.com @webyousoon 55
  43. each $alerts: success error; @each $alert in $alerts { .alert-#{$alert}

    { &::before { background-image: url(/images/# {$alert}.png); } } } www.webyousoon.com @webyousoon 56
  44. each www.webyousoon.com @webyousoon .icon-left-kissing::before { content: " "; margin-left: 16px;

    } .icon-left-smiling::before { content: " "; margin-left: 16px; } .icon-left-fearful::before { content: " "; margin-left: 16px; } 57
  45. Alors, Sass pratique tout de suite ? FACILE À METTRE

    EN PLACE TRANSITION DOUCE VOUS DEVEZ CONNAÎTRE CSS ! www.webyousoon.com @webyousoon 58