Les préprocesseurs CSS, c’est senSass !

Un préprocesseur CSS est un outil (ou programme) permettant de générer dynamiquement des fichiers CSS. L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web (source : Wikipedia).

Les préprocesseurs CSS les plus couramment employés sont aujourd’hui Sass, LESS (dont nous avons déjà parlé), PostCSS et Stylus.

Dans le cadre de cet article, j’ai fait le choix de ne couvrir que le préprocesseur “Sass”, largement majoritaire parmi les développeurs web en ce moment. En effet, de très grands sites web, dont ceux d'Apple, BBC, Yelp, Twitter, The Guardian, Salesforce, 6play, RTL, Fun Radio, Behance pour n'en citer qu'une poignée, sont intégrés via Sass.

Quel que soit votre choix, la différence entre les préprocesseurs sera généralement assez minime.

Pour vous faire la main, sachez que Sass propose un Bac à sable pour le moins réussi : http://www.sassmeister.com/

Note : merci à Jennifer pour la trame de base et la majorité des exemples de ce (long) article :)

À quoi sert un préprocesseur ?

Pour commencer, rappelons à quoi sert un préprocesseur et ce qu’il va apporter dans votre quotidien d’intégrateur fainéant (ce qui est un compliment dans ma bouche) :

1. des variables ❤ pour rassembler vos couleurs, espacements, tailles de polices etc.
2. une notation imbriquée pour « modulariser » CSS
3. des opérations et fonctions simples pour assombrir, éclaircir, traiter les couleurs, effectuer des calculs, etc.
4. des fonctions personnalisées pour vos besoins spécifiques, avec boucles, paramètres, conditions, etc.
5. et bien d’autres choses

Comment compiler en CSS ?

Un préprocesseur est un méta-langage qui nécessite d’être compilé en CSS “normal” pour être interprété par un navigateur. Il est donc nécessaire d’introduire une étape de compilation, où une moulinette va se charger de la transformation Sass en CSS.

Cette étape peut être réalisée de différentes manières, dont voici les plus courantes :

• Une application graphique : Prepros, Codekit, Koala, Scout, etc.
• Un plugin éditeur : Sass autocompile (Atom), Sass Sublime (Sublime Text), Brackets Sass (Brackets), etc.
• À l’aide de task runners : Gulp, Grunt, Brunch, etc.
• Directement en ligne : Sassmeister, Pleeease, Lesstester, etc.s

Extensions de fichiers Sass

Un fichier Sass aura pour extension .scss (anciennement .sass dont la syntaxe était plus éloignée de CSS). en voici quelques exemples :

styles.scss
kiwi.scss

Sera compilé en :

styles.css
kiwi.css

Variables

Une variable Sass est composée d’un préfixe $, le nom de la variable, le séparateur : et la valeur de la variable. Tout ceci est très proche du langage CSS et ne devrait pas vous choquer.

Ainsi, les variables suivantes :

$unicorn: yellow;
$kitten: pink;

Employées dans les règles suivantes :

div {
  color: $unicorn;
}
p {
  background: $kitten;
}

Seront compilées ainsi :

div {
  color: yellow;
}
p {
  background: pink;
}

Variables locales et globales

La portée des variables est contextuelle à leur environnement.

styles.scss :

$base-color: pink;

.unicorn {
  $base-color: yellow;
  color: $base-color;
}
.kitten {
  color: $base-color;
}

Sera compilé en :

.unicorn {
  color: yellow;
}
.kitten {
  color: pink;
}

Il est possible de modifier la portée d’une variable en lui attribuant un suffixe !default ou !global

Import de fichiers « partials »

Les "partials" sont des fichiers préfixés d'un underscore (le fameux "tiret du 8" : _) afin de ne pas être compilés et de ne pas apparaître dans la liste des fichiers CSS générés.

L'import du fichier se fait à l'aide de la directive @import. Le caractère underscore (_) et le type d'extension (.scss) ne sont pas nécessaires dans la déclaration d'import.

_variables.scss :

$base-color: pink;

styles.scss :

@import "variables";
.unicorn {
  color: $base-color;
}

Seront compilés en un fichier unique styles.css :

.unicorn {
  color: pink;
}

Imbrication de règles

Les règles d’une feuille de styles Sass peuvent être imbriquées, ce qui facilite la méthodologie d’intégration sous forme de CSS modulaires.

styles.scss :

.row {
  h2 {
    color: $main-color;
  }
  .is-active {
    background-color: #EEE;
  }
}

Sera compilé en :

.row h2 {
  color: pink;
}
.row .is-active {
  background-color: #EEE;
}

Sélecteur « & »

Le sélecteur & est appelé “sélecteur de parent” en Sass. Son rôle est multiple et très pratique, voyez vous-même…

styles.scss :

.kitten {
  .is-cute { … }
}
.kitten {
  & .is-cute { … }
}
.kitten {
  &.is-cute { … }
}
.kitten {
  .is-cute & { … }
}

Sera compilé en :

.kitten .is-cute { … }

.kitten .is-cute { … }

.kitten.is-cute { … }

.is-cute .kitten { … }

Et puis :

a {
  background: pink;
  &:focus, &:active, &:hover {
    text-decoration: overline;
  }
}

Deviendra :

a {
  background: pink;
}
a:focus, a:active, a:hover {
  text-decoration: overline;
}

Fonctions intégrées

Un très grand nombre de fonctions simples (dont voici la liste) est intégré au langage Sass.
Elles permettent de manipuler les couleurs, les nombres ou les chaînes de caractères.

styles.scss :

$base-color: pink;

p {
  color: lighten($base-color, 10%);
  color: darken($base-color, 10%);
  color: transparentize($base-color, 0.5);
}

Sera compilé en :

p {
  color: #fff3f5;
  color: #ff8da1;
  color: rgba(255, 192, 203, 0.5);
}

@extend, %placeholder et mixin

La directive @extend

Sass offre la possibilité de réutiliser des morceaux de CSS (“snippets”) grâce à la directive @extend.

styles.scss :

.border {
  border: 2px solid pink;
}
.link {
  @extend .border;
}
.article a {
  @extend .border;
}
.title a {
  @extend .border;
}

Sera compilé en :

.border,
.link,
.article a,
.title a {
  border: 2px solid pink;
}

Le %placeholder

Le comportement d’un %placeholder est sensiblement identique à celui d’un @extend à ceci près qu’il ne sera pas lui-même compilé et n’apparaîtra pas au sein des classes CSS générées.

styles.scss :

%border {
  border: 2px solid pink;
}
.link {
  @extend %border;
}
.article a {
  @extend %border;
}
.title a {
  @extend %border;
}

Sera compilé en :

.link,
.article a,
.title a {
  border: 2px solid pink;
}

Le mixin

Autre variante proche du %placeholder et du @extend, le mixin est principalement employé pour réaliser ses fonctions personnalisée, munies de paramètres, de boucles et de conditions.

styles.scss :

@mixin border {
  border: 2px solid pink;
}
.link {
  @include border;
}
.article a {
  @include border;
}
.title a {
  @include border;
}

Sera compilé en :

.link {
  border: 2px solid pink;
}
.article a {
  border: 2px solid pink;
}
.title a {
  border: 2px solid pink;
}

Avec des paramètres, styles.scss :

@mixin color($color) {
   color: $color;
}
.whale {
  @include color(pink);
}
.fish {
  @include color(hotpink);
}

Sera compilé en :

.whale {
  color: pink;
}
.fish {
  color: hotpink;
}

L’interpolation de variables

L’interpolation (ou échappement) de $variable, notée #{$variable} ouvre la voie à certaines manipulation de chaînes ou de valeurs.

Par exemple lorsque deux valeurs sont placées côte à côte, elles seront calculées (font: $font/ $line-height;
sera compilé en font: 0.4;, selon la valeur des variables bien entendu). Toutefois, en interpolant les variables, celles-ci ne seront alors conservées telles quelles : font: #{$font}/#{$line-height}; sera compilé en font: 12px/30px;.

Dans la même optique, une chaîne de caractère interpolée se voit débarassée de ses quotes ou double-quotes, et deux chaînes côte à côte ne seront plus concaténées mais calculées.

Ainsi le bout de Sass suivant est invalide :

$name: foo;
$attr: border;
p.$name {
  $attr-color: blue;
}

Tandis que la version interpolée est parfaitement fonctionnelle :

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

Et sera compilé en :

p.foo {
  border-color: blue;
}

Les boucles

Il est assez simple de concevoir des boucles en Sass, en cumulant les directives @for, from et through, entre autres possibilités.

En voici un exemple.

styles.scss :

@for $i from 1 through 3 {
  .spacer-#{$i} {
    margin: $i * 1rem;
  }
}

Sera compilé en :

.spacer-1 {
  margin: 1rem;
}

.spacer-2 {
  margin: 2rem;
}

.spacer-3 {
  margin: 3rem;
}

Les conditions

Sans trop de surprise, les conditions en Sass se basent sur les directives @if et @else.

Voici un exemple où l’on trouve une condition dans un environnement de mixin, composé de paramètres et d’interpolation de variable.

styles.scss :

@mixin img($url, $rotation) {
  background: url(#{$url}.png);
  @if $rotation == 0 {
  }  
  @else {
    transform: rotate($rotation);
  }
}

p {
  @include img("kiwi", 10deg);
}

Sera compilé en :

p {
  background: url(kiwi.png);
  transform: rotate(10deg);
}

Conclusion

Le meta-langage Sass apporte un réel confort dans l’environnement du développeur web. En attendant que les spécifications CSS comblent leurs lacunes (c’est en cours pour les variables ou les imbrications, notamment), ou que d’autres types d’outils tels que PostCSS ne prennent le dessus, les préprocesseurs demeurent aujourd’hui incontournables dans nos projets web.

Cet article n’est qu’une introduction sommaire au potentiel de Sass. Il est bien entendu possible d’aller bien plus loin dans ses retranchements, mais pour cela je vous invite à consulter attentivement sa documentation officielle.

Pour poursuivre cette lecture, je vous invite à consulter le document "Sass vs LESS" concocté par Jennifer Noesser au format PDF et disponible en ligne.