Sass, pratique tout de suite Workshop Alvin Berthelot 

www.webyousoon.com Alvin Berthelot Email : [email protected] Twitter : @alvinberthelot 

Les préprocesseurs 

C’est quoi un préprocesseur CSS ? • Il s’agit d’un métalangage, ne pouvant être utilisé comme tel, mais servant à faciliter la génération d’un autre langage (en l’occurence CSS) • C’est un outil pour produire et maintenir des feuilles de styles CSS, cela ne vient pas remplacer le standard qu’est CSS pour la mise en forme • L’utilisation d’un préprocesseur CSS ne vous offre donc pas de nouvelles possibilités sur la mise en forme  Un préprocesseur CSS ne vous abstient pas de connaître CSS 

Pourquoi un préprocesseur CSS ? Si CSS reste le maître incontesté de la mise en forme, son utilisation brute est toutefois perfectible sur certains points : • Le découpage des fichiers sources • Les dépendances de mises en forme pour garder une cohérence globale • La répétitivité de certaines tâches 

Quels sont les préprocesseurs existants ? Il existe plusieurs préprocesseurs CSS, mais à l’heure actuelle, 3 ressortent clairement du panier : • Sass : Préprocesseur écrit en Ruby mais désormais également écrit en C (LibSass) ce qui a permis le portage sous Node.js • LESS : Préprocesseur écrit en ECMAScript s’executant sous Node.js • Stylus : Préprocesseur écrit en ECMAScript s’executant sous Node.js Les 3 préprocesseurs ont gloablement des fonctionnalités similaires, seules leurs syntaxes sont différentes.  Les préprocesseurs écrits en ECMAScript ont l’avantage de pouvoir être utilisés directement dans un navigateur 

Pourquoi choisir Sass ? Si les fonctionnalités ne sont pas le critère déterminant pour un choisir un préprocesseur, pourquoi choisir Sass plutôt qu’un autre ? • Portabilité : Les implémentations Ruby / C (et la possibilité de l’utiliser via Node.js) permettent de s’adresser à un plus grand nombre de développeurs • Fiabilité : De nombreuses entreprises (BBC, eBay, LinkedIn, etc.) utilisent déjà ce préprocesseur • Communauté : De nombreux frameworks et librairies ont adoptés ce préprocesseur et il existe de nombreuses documentations à son sujet Les autres préprocesseurs peuvent tout à fait vous convenir et rien ne vous oblige à en changer si vous en êtes content. J’ai choisi Sass car c’est le plus populaire et cela à ses avantages en terme d’écosystème et d’apprentissage. 

Sass 

Introduction Sass est à la fois un gem Ruby et la syntaxe compatible avec ce gem. Mais pour assurer une compatibilité native avec le CSS, une nouvelle syntaxe est apparue : SCSS (Sassy CSS). Le préprocesseur Sass supporte donc 2 syntaxes, ayant chacune leur extension : • .sass : Reposant sur une syntaxe se basant sur les indentations • .scss : Reposant sur la syntaxe originale CSS, plus verbeuse mais plus familière également Nous privilègierons cette dernière syntaxe, car elle à l’avantage de permettre une transition douce de CSS vers Sass, pour la simple et bonne raison que tout fichier CSS est compatible immédiatement à cette syntaxe. 

Exercice 1. Convertir le fichier CSS existant en fichier Sass, celui-ci devra se nommer app.scss et se situer dans un dossier app/styles 2. Changer la tâche build du fichier gulpfile.js en appelant non plus copy-css mais plutôt css, puis relancer la commande gulp. Le fichier CSS créé via le préprocesseur Sass, doit se trouver dans public/css, la mise en forme de la page web doit être identique 3. Modifier (et sauvegarder) une propriété dans le fichier Sass, la modification doit avoir lieu dans la page web 

Les fonctionnalités L’écriture de mise en forme CSS directe (sans préprocesseur) étant perfectible, quelles sont les fonctionnalités qu’offre Sass pour palier à ces problèmes : • Import : inclusion de fichiers Sass • Variable : utilisation de variables • Nesting : imbrication des sélecteurs CSS • Operations : réalisation d’opérations sur les valeurs • Function : utilisation de fonctions pour calcul d’une valeur • Mixin : composition de propriétés CSS • Extend & Placeholders : héritage de propriétés CSS 

Import 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  L’ordre de déclaration des fichiers a une grande importance  Pour des fichiers partiels, la convention veut qu’ils commencent par _ sans pour autant être déclarés lors de l’import 

Import (exemple) Sass body { background: whitesmoke; } // Fichier contenant h1 {color: blue;} @import "partials/typo"; CSS body { background: whitesmoke; } h1 { color: blue; } 

Variable 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, sans déclarer de type de données : #9013FE, 24px, right, etc. Cela ne signifie pas qu’il n’y a pas de type de données pour autant, nous verrons cela après.  L’affectation de variables n’est pas dynamique, il ne faut pas confondre avec l’utilisation de variables en CSS 

Variable (exemple) Sass // Déclaration d'une variable avec $ $purple: #9013FE; h1 { // Utilisation color: $purple; } CSS h1 { color: #9013FE; } 

Nesting 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 chaînera (exemple : section .alert) le deuxième sélecteur au premier et reprendra les propriétés de ce deuxième sélecteur. Si l’on souhaite chaîner directement (exemple : section.alert) on utilisera & devant le deuxième sélecteur pour coller le deuxième sélecteur au premier.  Il est préférable de ne pas abuser des imbrications car la lisibilité du code peut vite s’en ressentir, il est généralement conseillé de faire des regroupements cohérents et de s’en tenir à 4 niveaux d’imbrication 

Nesting (exemple) Sass section { border: 1px solid whitesmoke; .alert { colour: red; } } CSS section { border: 1px solid whitesmoke; } section .alert { colour: red; } 

Exercice 1. Déclarer des variables pour l’affichage des polices, les couleurs utilisées et les points de rupture 2. Déclarer un fichier app.scss qui devra faire appel à plusieurs fichiers .scss partiels, un pour le reset CSS, un pour la typographie, et un pour la déclaration des variables 3. Utilisons les possibilités du Nesting pour imbriquer les sélecteurs à l’intérieur de la classe CSS .recipe 

Les 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îne de caractères • Nombre : exprimant une unité de longueur (40px, 2em, etc.), de durée (2s), etc. • Couleurs : exprimant une couleur (mot clé CSS, notation HSL, notation RGB, notation hexadécimale) • Listes : exprimant des tableaux pouvant stocker des valeurs de tout type • Maps : exprimant des tableaux associatifs clés / valeurs, pouvant stocker des valeurs de tout type 

Les types de données (exemple) SCSS $string: 'left'; $number: 1em; $colour: magenta; $list: (blue, white, red); $map: ( 'small': 767px, 'medium': 992px, 'large': 1200px, );  Il est conseillé de déclarer les chaînes de caractère entre guillemets  Plusieurs syntaxes pour les listes, il est conseillé de déclarer une liste entre parenthèses et de séparer les éléments par , 

Opérations Il est possible de réaliser des opérations sur des données selon leur type : • Chaînes de caractères : concaténation (+) • Nombres : addition (+), soustraction (-), division (/) et multiplication (*) • Couleurs : addition (+), soustraction (-), division (/) et multiplication (*)  Pour les opération sur les nombres, on ajoute / soustrait les unités des valeurs utiliseés  Listes et Maps ne supportent pas d’opérations mais des fonctions 

Opérations (exemple) Sass $container-width: 960px; $num-columns: 3; .column { width: container-width / num-columns; } CSS .column { width: 320px; } 

Function Puisque l’on peut faire des opérations, factorisons des traitements avec des fonctions. • Une fonction se déclare avec @function suivie d’un nom et de parenthèses contenant des paramètres éventuels • Le corps d’une fonction se situe dans des accolades { … } et retourne une unique valeur avec @return (pas d’effets de bord sur les paramètres en entrée) • Une fonction s’utilise avec son nom, suivie immédiatement de ses parenthèses d’invocation (avec les paramètres à l’intérieur si nécessaire)  Pour retourner plus qu’une valeur, en l’occurence plusieurs propriétés CSS, les mixins seront utilisés 

Function (exemple) Sass @function pxtorem($pxval, $base) { @return ($pxval / $base) * 1rem; } h1 { margin: pxtorem(24px, 16px); } CSS h1 { margin: 1.5rem; } 

Les fonctions natives Sass Sass dispose déjà de nombreuse fonctions "prêtes à l’emploi" : • Sur les couleurs pour jouer sur la clarté, la saturation, les proportions RVB, etc. • Sur les chaînes de caractères pour les modifier ou obtenir des informations • Sur les nombres pour obtenir des arrondis, déterminer les valeurs minimales ou maximales, etc. • Sur les listes pour obtenir le nombre d’éléments, concaténer 2 listes, etc. • Sur les maps pour obtenir un élément, fusionner 2 maps, etc.  Toutes les fonctions natives sont documentées sur le site officiel de Sass 

Les fonctions natives Sass (exemple) Sass $colour: red; a { colour: darken($colour, 10); } a:hover { colour: lighten($colour, 10); } CSS a { colour: #cc0000; } a:hover { colour: #ff3333; } 

Mixin Les fonctions arrivent vite à leur limitation puisqu’elles ne peuvent retourner qu’une seule valeur. Qui plus est, elles renvoient uniquement une valeur et non pas une association propriété valeur. Pour cela il faut utiliser les mixins. • Un mixin se déclare avec @mixin suivi d’un nom et de parenthèses contenant des paramètres éventuels • Le corps d’un mixin se situe dans des accolades { … } et retourne son contenu (pas d’effets de bord sur les paramètres en entrée) • Un mixin s’utilise avec @include suivi de son nom, et suivie immédiatement de ses parenthèses d’invocation (avec les paramètres à l’intérieur si nécessaire) 

Mixin (exemple) Sass @mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .teaser { width: 300px; @include text-truncate; } CSS .teaser { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

Extend L’héritage est une alternative au mixin, il ne va pas dupliquer les propriétés CSS, mais les regrouper en listant les sélecteurs s’appropriant ces propriétés. • Un héritage se déclare avec @extend suivi du nom du sélecteur dont l’on souhaite hériter • L’héritage à l’avantage de regrouper les propriétés CSS, mais cela induit des dépendances plus fortes • Le sélecteur dont on hérite sera généré dans le CSS  Il n’est pas possible d’hériter d’un sélecteur chaîné (exemple : .container h1) 

Extend (exemple) Sass .info { border-radius: 4px; padding: 20px; } .alert { @extend .info; background: red; } CSS .info, .alert { border-radius: 4px; padding: 20px; } .alert { background: red; } 

Placeholders Il s’agit d’une variante de l’héritage classique @extend, la variante étant que le sélecteur dont on souhaite hériter est "abstrait" et ne sera pas généré dans le CSS. • Il s’utilise exactement de la même manière que @extend à l’exception que l’on indique que l’élément dont on souhaite hériter est "abstrait" avec % 

Placeholders (exemple) Sass %info { border-radius: 4px; padding: 20px; } .alert { @extend %info; background: red; } CSS .alert { border-radius: 4px; padding: 20px; } .alert { background: red; } 

Exercice 1. Utiliser l’unité rem pour la taille des polices est loin d’être évident, il faudrait pouvoir les écrire en px dans les sources et les retrouver en rem dans le fichier généré sachant que l’on se situe sur une base de 16px par défaut 2. Les images de recettes ainsi que les icônes utilisent des boîtes rondes avec la propriété border-radius, il faudrait factoriser ce code en passant le diamètre en paramètre 3. On souhaite donner les mêmes propriétés padding et margin aux classes .teaser, .instructions et .ingredients sans pour autant que ces propriétés se répètent dans le CSS généré 

Fonction & mixin : argument optionnel Pour les fonctions et les mixins, il est possible de rendre un argument optionnel en lui spécifiant une valeur par défaut. Pour cela l’argument doit être suivi : et de sa valeur (comme lors d’une définition de variable) au sein de la définition de la fonction ou du mixin.  Lors de l’appel de la fonction ou du mixin Sass fera la correspondance entre les valeurs et les arguments selon leur ordre de déclaration  Pour s’assurer de bien lier les bonnes valeurs aux bons arguments, les valeurs peuvent être spécifiées de la même manière qu’elles sont déclarées 

Exemple : argument optionnel Sass @function pxtorem($pxval: 24px, $base: 16px) { @return ($pxval / $base) * 1rem; } h1 { margin: pxtorem(); padding-bottom: pxtorem(32px); padding-top: pxtorem($base: 32px); } CSS h1 { margin: 1.5rem; padding-bottom: 2rem; padding-top: 0.75rem; } 

Fonction & mixin : liste d’arguments Pour les fonctions et les mixins, il est possible de passer une liste d’arguments. Pour cela la liste d’arguments doit être suivi … au sein de la définition de la fonction ou du mixin.  Il ne peut y avoir qu’une seule liste d’arguments et il doit s’agir du dernier argument 

Exemple : listes d’arguments Sass @mixin linear-gradient($direction, $gradients...) { background-image: linear-gradient($direction, $gradients); } .france { @include linear-gradient(to right, blue, white, red); } CSS .france { background-image: linear-gradient(to right, blue, white, red); } 

Fonctions & mixins : l’interpolation Sass ne peut utiliser les variables en l’état en dehors des blocs de déclaration prévu à cet effet. Pour sortit du cadre, il faut passer par l’interpolation des variables pour que le préprocesseur puissent les utiliser. Pour cela il faut englober une variable (lors de son utilisation) par #{…}. 

Exemple : interpolation Sass $colour: red; .btn-#{$colour} { background: $colour; } CSS .btn-red { background: red; } 

Les structures de contrôle Il est possible d’utiliser les structures de contrôle classiques comme dans des langages dynamiques. • if, else : Pour conditionner les traitements suivant une condition • for : Pour effectuer une boucle de tant à tant • while : Pour effectuer une boucle tant qu’une condition est vraie • each : Pour itérer sur un liste 

if, else (exemple) Sass @mixin contrast($colour) { @if lightness($colour) < 50% { color: white; } @else { color: black; } } $bg-color: green; h1 { background: $bg-color; @include contrast($bg-color); } CSS h1 { background: green; color: white; } 

for (exemple) Sass @for $i from 1 through 3 { .column-#{$i} { width: 100% / $i; } } CSS .column-1 { width: 100%; } .column-2 { width: 50%; } .column-3 { width: 33.33333%; } 

while (exemple) Sass $column: 3; @while $column > 0 { .column-#{$column} { width: 100% / $column; } $column: $column - 1; } CSS .column-3 { width: 33.33333%; } .column-2 { width: 50%; } .column-1 { width: 100%; } 

each (exemple) Sass $alerts: success error; @each $alert in $alerts { .alert-#{$alert} { &::before { background-image: url(/images/#{$alert}.png); } } } CSS .alert-success::before { background-image: url(/images/success.png); } .alert-error::before { background-image: url(/images/error.png); } 

Exercice 1. Il faudrait créer un mixin permettant d’ajouter facilement des démarcations (2 lignes) en renseignant la couleur et le positionnement de la démarcation 2. Il faudrait créer l’ensemble des classes commenceant par .icon de manière automatisée avec en entrée une liste configurable et ce avec le moins de code possible 

Outils Sass 

Utilisation de Sass • Les frameworks et bibliothèques : Compass, Bourbon, Susy, Foundation, Bootstrap, etc. • Les "tasks runners" pour fluidifier le développement : Grunt, Gulp, Brunch • La génération de documentation : SassDoc 

Annexes Annexes • Sass : Documentation officielle Sass • Sass guidelines : Ensemble de bonnes pratiques et d’explications pour développer avec Sass • The Sass way : Un site dédié aux pratiques de développement avec Sass • Sass bites : Chaîne YouTube avec de nombreux tutoriaux en vidéo • Sass meister : Un outil de préprocessing Sass en ligne