Save 37% off PRO during our Black Friday Sale! »

Sass, pratique tout de suite

Sass, pratique tout de suite

Slides du lab' au BreizhCazmp 24/03/16

1c34ccee17ff6125f08fc34ccf68bf71?s=128

Alvin Berthelot

March 24, 2016
Tweet

Transcript

  1. Pratique tout de suite www.webyousoon.com @webyousoon 1

  2. Qui suis-je ? Alvin BERTHELOT @alvinberthelot webyousoon.com @webyousoon 2 www.webyousoon.com

    @webyousoon
  3. Environnement Lab’ www.webyousoon.com @webyousoon 3

  4. 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
  5. Les préprocesseurs www.webyousoon.com @webyousoon 5

  6. 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
  7. 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
  8. Quid des préprocesseurs CSS ? www.webyousoon.com @webyousoon 8

  9. Pourquoi choisir Sass ? www.webyousoon.com @webyousoon 9

  10. Sass www.webyousoon.com @webyousoon 10

  11. 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
  12. Les fonctionnalités “de base” www.webyousoon.com @webyousoon 12

  13. Les fonctionnalités “de base” Imports. Variables. Nestings. Opérations. Fonctions. Mixins.

    Extends & Placeholders. www.webyousoon.com @webyousoon 13
  14. 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
  15. Imports body { background: whitesmoke; } // Fichier contenant h1

    {color: blue;} @import "partials/typo"; www.webyousoon.com @webyousoon 15
  16. 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
  17. Variables // Dé claration d'une variable avec $ $purple: #9013FE;

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

    .box { border-bottom: 1px solid brown; padding: 24px; } www.webyousoon.com @webyousoon 18
  19. 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
  20. Nestings section { border: 1px solid whitesmoke; .alert { colour:

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

    none; } .promo a:hover { color: deeppink; } www.webyousoon.com @webyousoon 21
  22. 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
  23. 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
  24. 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
  25. Opérations $container-width: 960px; $num-columns: 3; .column { width: $container-width /

    $num-columns; } www.webyousoon.com @webyousoon 25
  26. 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
  27. 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
  28. Fonctions @function sum($value1, $value2) { @return $value1 + $value2; }

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

    1.5rem; } www.webyousoon.com @webyousoon 29
  30. 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
  31. Fonctions natives $colour: red; a { colour: darken($colour, 10); }

    a:hover { colour: lighten($colour, 10); } www.webyousoon.com @webyousoon 31
  32. 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
  33. Mixins @mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

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

    } .footer i { border-radius: 50%; height: 50px; width: 50px; } www.webyousoon.com @webyousoon 34
  35. 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
  36. Extends .info { border-radius: 4px; padding: 20px; } .alert {

    @extend .info; background: red; } www.webyousoon.com @webyousoon 36
  37. 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
  38. 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
  39. Placeholders %info { border-radius: 4px; padding: 20px; } .alert {

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

    0; line-height: 1.5em; } ol li { color: green; } www.webyousoon.com @webyousoon 40
  41. Les fonctionnalités “avancées” www.webyousoon.com @webyousoon 41

  42. Les fonctionnalités “avancées” Les arguments optionnels. Les listes d’arguments. L’interpolation.

    Les structures de contrôle. www.webyousoon.com @webyousoon 42
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. L’interpolation $colour: red; .btn-#{$colour} { background: $colour; } www.webyousoon.com @webyousoon

    48
  49. L’interpolation BodyLayout-maincontent { float: left; width: 75%; } BodyLayout-sidebar {

    float: right; width: 25%; } www.webyousoon.com @webyousoon 49
  50. 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
  51. 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
  52. 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
  53. for @for $i from 1 through 3 { .column-#{$i} {

    width: 100% / $i; } } www.webyousoon.com @webyousoon 53
  54. 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
  55. while $column: 3; @while $column > 0 { .column-#{$column} {

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

    { &::before { background-image: url(/images/# {$alert}.png); } } } www.webyousoon.com @webyousoon 56
  57. 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
  58. Alors, Sass pratique tout de suite ? FACILE À METTRE

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