CSS

Les préprocesseurs CSS, c’est senSass !

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (10111 lectures)
Tags : scss, sass, less, préprocesseur, Stylus, variables, compiler

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 :)

Sass

À 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.

Ressources

Commentaires

MeMeN a dit le

Un indispensable et incontournable dans toute production web d'aujourd'hui !

bwbk a dit le

Pour ceux qui veulent commencer SASS sans taper de ligne de commande :
http://koala-app.com/

Raphael a dit le

@bwbk : oui, il est cité dans ma liste au début de l'article "Une application graphique : Prepros, Codekit, Koala, Scout, etc." ;)

bwbk a dit le

@Raphael : en rafraichissant mon message c'est doublé.
Koala est graphique, gratuit et open source…
Brackets Sass exige un peu de bidouille pour s'installer (idem avec Atom où j'ai tapé un npm install node-sass -g pour m'en sortir) et à mon avis sans xcode sur sa machine je ne suis pas certain que le truc s'installe.

chloecorfmat a dit le

Salut !
Article très intéressant... Je connaissais déjà Sass, mais pas de manière très approfondie. J'ai encore appris des choses, alors merci !

Par contre, je pense qu'il y a une petite coquille dans la partie : Import de fichiers « partials » :

$base-color: pink;

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

Seront compilés en un fichier unique styles.css :
/** et non pas color: yellow comme indiqué **/
.unicorn {
color: pink;
}

Merci encore pour cet article ! :)

Raphael a dit le

@chloecorfmat : bien vu, c'est corrigé.
@bwbk : il faudra que j'essaye Koala mais j'avais constaté que le projet était en standby depuis 2 ans (https://github.com/oklai/koala) or c'est un domaine qui évolue beaucoup. C'est pourquoi je demeure très fan de Prepros dont la version "trial" fonctionne comme Sublimetext (une simple popup de temps en temps).

bwbk a dit le

@Raphael : ah oui ça n'évolue pas depuis 2 ans…

Derwoed a dit le

@bwbk :
Koala est super quand on " ne sait pas / n’a pas envie de " se servir de lignes de commandes et de fichiers de conf. Toutefois il a plusieurs limitations :
- comme dit par @Raphaël il n’évolue plus (et ne suit donc pas les éventuelles évolutions de SASS). D’ailleurs, j’avais contacté son auteur il y a 3 ans (je crois) pour lui donner quelques idées d’amélioration d’IHM, il ne m’a jamais répondu…
- Koala a des limitations liées à son IHM (fenêtre à taille fixe, multiplication des clics pour configurer) qui deviennent gênantes quand on a beaucoup de projet à gérer, ou pire un projet avec plein de templates. Par exemple, depuis des années, je travailel sur un projet de CMS proposant des modèles graphiques différents (une centaine aujourd’hui). SASS avec ses variables est parfait pour cela, mais pas du tout Koala…
- sur des projets un minimum poussés on peu difficilement se passer d’un gestionnaire de tâche (type Gulp) et là, Koala ne sert plus à rien…

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil