Sass, pratique tout de suite

Slides du lab' au BreizhCazmp 24/03/16

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