Initiation à Sass, 1

Dans cette série de 3 articles, Laura Kalbag présente Sass en nous proposant de la suivre progressivement dans son travail de création d'un site. Sass va vous changer la vie.

Par

Sass est un préprocesseur. Lorsque vous écrivez en langage Sass, vous utilisez un compilateur qui convertit en CSS vos fichiers Sass — généralement écrits en format .scss. Sass ajoute à CSS des fonctions pratiques, des variables, et d'autres aides de type script qui vous permettent d'écrire plus rapidement votre CSS et de faciliter sa maintenance.

NdT : Pour une introduction générale à Sass, vous pouvez consulter cet article.

J'ai d'abord évité Sass parce qu'il me semblait fait pour les programmeurs (la documentation était remplie de terminologie de programmation), mais après avoir pris le temps d'apprendre son fonctionnement, j'ai finalement trouvé que Sass n'est pas compliqué. Il existe certes des fonctions et des opérations qui satisferont les programmeurs, mais il y a aussi tout un tas de choses cool qui simplifient CSS pour nous autres.

L'autre raison qui m'éloignait de Sass était la console. Je ne me rappelle jamais ce qu'il faut taper et j'ai toujours peur de taper la “commande de la mort” qui va tout effacer sur mon ordinateur. Sass utilise la console et il a besoin de Ruby pour fonctionner — même si nous n'avons pas besoin de connaître quoi que ce soit à Ruby pour l'utiliser. Mais nous pouvons nous passer de la console car heureusement il existe des outils avec de belles interfaces simples et compréhensibles qui nous facilitent la vie et évitent d'avoir à passer par la console.

Dans cette série en trois parties, je vais vous présenter Sass à partir du process que j'ai suivi pour construire le site Web Talk Dog Walk avec Sass.

image


Créer un projet Sass avec CodeKit

CodeKit est mon outil préféré pour écrire Sass et je vais l'utiliser dans les exemples qui suivent (1). Il compile les fichiers Sass et il est disponible pour Mac. On peut l'essayer gratuitement mais il coûte environ 30$ à l'achat. Si vous utilisez Windows, Prepros et Mixture ressemblent à CodeKit par leurs fonctionnalités et leur prix et Koala est une alternative cross-plateformes gratuite.

NdT : Pour une présentation de CodeKit, vous pouvez consulter cet article.

Ajouter un projet

Pour que CodeKit puisse compiler Sass, il faut ajouter votre projet dans CodeKit, cela peut se faire via la barre de menu ou plus simplement en glissant-déplaçant votre dossier sur l'icône de CodeKit.

Vous n'avez pas besoin de compiler HTML, vous pouvez donc cacher ces fichiers en ne sélectionnant que les Stylesheets (feuilles de style) dans le menu déroulant à droite.

image

Créer un dossier Sass

Ensuite, dans le dossier de votre projet, créez un dossier sass qui contiendra tous nos fichiers Sass. Lorsque ceux-ci sont compilés, CodeKit crée automatiquement un dossier /css qui contiendra le CSS compilé.

image

Remarquez que CodeKit a ajouté un dossier config.codekit, c'est là qu'il stockera toutes vos préférences pour ce projet.

Créer un fichier Sass

Une fois votre projet et les dossiers créés, vous êtes prêt à écrire Sass. Pour commencer, créez un fichier vide dans le dossier sass et appelez-le style.css.

Vous pouvez même modifier l'extension d'un fichier .css en .scss et ce sera un code Sass toujours valide que CodeKit pourra compiler. Cest pratique si vous voulez profiter de quelques fonctionnalités Sass dans un fichier CSS existant.

Écrire et compiler Sass

La première chose que je recommande d'ajouter à notre fichier style.scss est le CSS reset :

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, svg, hr {margin: 0;padding: 0;border: 0;font-size: 100%; font: inherit; vertical-align: baseline; font-weight: normal;} …

Le reset est écrit en CSS normal, mais cela n'a aucune importance puisqu'un fichier .scss peut comprendre à la fois Sass et CSS, et CodeKit les compile tous les deux. Lorsque vous enregistrez style.scss, il est affiché dans la liste des fichiers :

image

Ensuite, vous pouvez vérifier que CodeKit compile comme prévu : cliquez sur style.scss, une fenêtre s'ouvre et dans Output File vous voyez que style.scss est compilé en /css/style.css. De plus, vous pouvez cocher l'option Use the libsass compiler pour utiliser libsass, et l'option run Autoprefixer on the CSS file qui appliquera Autoprefixer en postprocessing sur votre CSS. À tout moment vous pouvez cliquer sur Compile pour compiler, mais la compilation se fait automatiquement lorsque vous enregistrez n'importe quel fichier .scss.

image

Vous devriez maintenant voir un nouveau dossier css dans votre projet CodeKit, contenant le CSS compilé :

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, svg, hr {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-weight: normal; 
}
…

Avec CodeKit une fois que vous avez compilé un fichier, il vous suffit de l'enregistrer pour qu'il soit automatiquement compilé. CodeKit "observe" maintenant votre fichier.

Si vous préférez que votre CSS soit minifié, vous pouvez sélectionner compressed dans le menu Output style :

image

Enfin, n'oubliez pas que le CSS compilé doit être référencé dans la partie head de votre HTML :

<link rel="stylesheet" href="css/style.css">


Partiels

Maintenant que vous connaissez les bases, concentrons-nous sur les avantages que nous offre Sass, à commencer par l'organisation des fichiers. Lorsqu'on a beaucoup de lignes de code, le CSS peut devenir difficile à lire. Sa maintenance est beaucoup plus facile lorsque les fichiers sont séparés.

Les partiels de Sass nous permettent de mettre un peu d'ordre dans nos fichiers sans aucune incidence sur la performance. Avec le CSS standard, vous pouvez certes éclater vos styles en fichiers multiples et les lier à votre page HTML, ou via @import dans une autre feuille de style, mais à chaque fois que vous devez aller chercher un fichier ailleurs vous créez une requête serveur supplémentaire. Plus vous multipliez les requêtes serveur, plus vous ralentissez votre site, même si le fichier lui-même est très léger.

Les partiels sont des fichiers séparés qui contiennent des lignes de code CSS ou Sass, regroupés de façon cohérente. Ces partiels sont référencés dans un fichier Sass principal grâce à la directive @import :

@import "partial";
@import "another-partial";
@import "partial-name";

Quand ce fichier principal est compilé, le CSS et le Sass contenus dans les partiels sont compilés. Le compilateur réunit tous vos styles dans un fichier CSS unique.

NdT : Pour distinguer les partiels des autres fichiers, on préfixe leur nom avec un tiret du dessous, par exemple _partial.scss.

Organiser les partiels

Organisez vos partiels en fonction de votre process de développement. Personnellement, j'aime suivre une structure modulaire comme SMACSS.

  • Sélecteurs de base HTML (base.scss)
  • Styles de mise en page (layout.scss)
  • Séparer toutes les dépendances, comme les reset ou les fonts, dans leurs propres partiels (p.ex. reset.scss)

J'inclus ces partiels dans mon fichier principal style.scss en utilisant la syntaxe @import (avec le nom du fichier sans le tiret du dessous)

@import "reset.scss";
@import "base.scss";
@import "layout.scss";

Dans CodeKit vous pouvez voir les partiels dans le même fichier que style.scss. Toutefois, les partiels apparaissent en grisé, parce qu'ils ne sont pas compilés directement, ils sont en fait une partie du fichier style.scss, ce que vous pouvez vérifier en cliquant sur l'onglet de droite (en vert sur l'image ci-dessous) qui liste les fichiers importés.

image

Et dans le dossier css vous pouvez voir que CodeKit n'a pas créé de nouveaux fichiers pour les partiels puisque tout a été compilé dans un fichier unique style.css :

image


Variables

Les variables sont l'aspect le plus simple et le plus immédiatement utile de Sass. J'utilise les variables pour répéter des valeurs globales telles que les couleurs et les polices de caractères. Une variable est définie à l'aide d'un nom précédé d'un $ et on lui assigne une valeur :

$grey-light: #f9f9f9;

Dans ma maquette de WebTalk Dog Walk, j'ai une palette de toutes les couleurs utilisées dans le design :

image

Pour définir ces couleurs dans Sass, j'ai créé un nouveau partiel, variables.scss, qui contient les variables de couleurs :

$white: #fff;

$grey-light: #f9f9f9;
$grey-mid-light: #eee;
$grey-mid: #ccc;
$grey-darker: #474747;

$green-light: #C0D0AA;
$green-bright: #97C459;
$green-mid-light: #759845;
$green-mid: #637A3D;
$green-mid-dark: #44632B;
$green-dark: #3F5526;

Vous pouvez donner aux variables le nom que vous voulez, j'essaie toujours d'utiliser des noms compréhensibles et faciles à mémoriser. Je regroupe les variables par couleur et je les ordonne par nuance, de façon à m'y retrouver facilement entre les clairs et les foncés.

Les variables peuvent ensuite être appliquées aux éléments dans base.scss, là où habituellement vous mettez une valeur hexadécimale :

body {
  background: $grey-mid-light;
  color: $grey-darker;
}

h1,
h1 a {
  color: $green-bright;
}

h2 {
  color: $green-dark;
}

Lorsque le fichier est enregistré et compilé, le résultat CSS est :

body {
  background: #eee;
  color: #474747;
}

h1,
h1 a {
  color: #97C459;
}

h2 {
  color: #777;
}

Les variables peuvent être utilisées de cette façon à travers toutes les feuilles de style, et si tout à coup je décide qu'un de mes verts n'est pas assez foncé, je peux simplement modifier la valeur hexadécimale de la variable et toutes mes feuilles de styles seront modifiées.

Pour aller plus loin avec les couleurs

Sass propose quelques opérations avec les couleurs qui vous permettent d'étendre vos variables de couleurs. Par exemple, si je veux une couleur plus brillante que celle que j'ai dans mes variables, je peux utiliser l'opération saturate plutôt que de créer une nouvelle variable.

L'opération suivante dit à Sass de saturer la couleur de h2 à 100% :

h2 {
  color: saturate($green-dark, 100%);
}

ce qui donne en CSS :

h2 {
  color: #5F8516;
}

NdT : vous pouvez vous amuser avec d'autres opérations comme lighten (éclaircir), darken (assombrir), transparentize (rendre transparent) et bien d'autres, les fonctionnalités couleur de Sass sont un vrai plaisir.


Commentaires

Les commentaires sont une part importante de l'écriture de CSS, que ce soit pour laisser une note à votre équipe ou pour vous-même. Ils peuvent également être utilisés comme des gros titres pour organiser votre feuille de style ou pour expliquer un CSS compliqué.

Vous pouvez utiliser deux types de commentaires dans Sass. La syntaxe CSS /* commentaire */ sera compilée et donc intégrée à votre CSS. Ce type de commentaire sera donc visible pour vos utilisateurs via Dev Tools.

La syntaxe Sass // est utilisée pour une ligne, elle ne sera pas compilée et donc ne sera visible que par vous.

/* Ce commentaire sera compilé dans le CSS final */
// Ce commentaire ne sera pas compilé dans le CSS final

Pour Web Talk Dog Walk j'ai commenté la description de mes variables de couleurs Sass avec la syntaxe // car les commentaires auraient été sans objet (les variables n'apparaissent pas dans le code compilé) :

// Color variables

$white: #fff;
$grey-light: #f9f9f9;


Affichage des erreurs dans CodeKit

S'il y a une erreur dans votre Sass, il ne sera pas compilé. Heureusement, CodeKit affiche des messages d'erreurs qui vous indiquent clairement le type d'erreur et l'endroit où elle se trouve :

image
Erreur de syntaxe: variable non définie: "$grey-dark".

Dans cet exemple, CodeKit m'indique que je n'ai pas défini la variable $grey-dark. Pour réparer cette erreur, il me suffit d'ajouter grey-dark à mes variables de couleurs et d'enregistrer le fichier.


Pièges à éviter

  • N'oubliez pas de vérifier le CSS compilé à partir de votre Sass, surtout quand vous débutez. On peut facilement créer un CSS boursouflé si on ne comprend pas ce qui est compilé à partir de notre Sass.
  • Rappelez-vous d'utiliser @import pour inclure vos partiels dans votre fichier Sass principal. Sinon, ils seraient compilés mais pour rien puisque vous ne les retrouveriez pas dans votre fichier CSS.

Choses à faire

  • Lisez la documentation de référence pour découvrir tout ce que Sass peut faire.
  • Séparez vos feuilles de styles en de petits fichiers modulaires dont la maintenance sera facile.
  • utilisez des variables pour vous épargner les tâches répétitives de recopier des couleurs, des polices, des unités...
  • Intégrez les partiels qui définissent vos variables et vos mixins tout en haut de votre fichier Sass principal, parce que les autres fichiers ont besoin de leur définition préalable pour pouvoir les utiliser.

La série d'articles

NdT:

(1) Lorsque vous utilisez un outil comme CodeKit, vous n'avez pas besoin d'importer Sass, ni Compass, ni Susy, etc. tout est déjà compris. De plus, il utilise LibSass au lieu de Ruby pour compiler, ce qui se fait en un éclair. CodeKit comprend bien d'autres fonctionnalités qui vont vous changer la vie. Pour plus d'infos, consultez cet article sur CodeKit 2.   ↩︎


Intéressé par Sass ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles parus sur Sass dans La Cascade.


Ressources complémentaires en français

Présentation de quelques concepts de Sass par Excilys Labs.
Pourquoi Sass et Compass sont des choix judicieux, par Human coders.
Sass, augmentez votre productivité par le blog du webdesign.
Domptez vos CSS avec Sass, par Seemios Blog
Sass: tout sur @extend, par Hugo Giraudel
Sass: mixin ou placeholder ?, par Hugo Giraudel
Sass et interpolation, par Hugo Giraudel

...et un livre de Hugo Giraudel à paraître bientôt ?

Ressources complémentaires en anglais

Sass for beginners, un guide pour installer et utiliser Sass sur Windows
Le livre de Hampton Catlin guide complet de Sass
Le livre de Dan Cederholm Sass for Web Designers
Le livre de Dale Sande et Kianosh Pourian, Sass in the Real World, disponible gratuitement sur GitBook
Sass reference, une meilleure documentation Sass.


original paru le dans Web Standards Sherpa.

Sur l'auteur : est designer chez ind.ie à Brighton au Royaume Uni. Elle passe son temps sur le design et le markup, et à promener son chien plein de poils Oskar. Pour en savoir un peu plus vous pouvez consulter son site perso ou la suivre sur Twitter.

Traduit avec l'aimable autorisation de Web Standards Sherpa et de l'auteur.
Copyright Web Standards Sherpa © 2014.