Formation Découverte du CSS : Les préprocesseurs CSS

Les préprocesseurs sont des outils qui vont vous permettre de transformer votre CSS et peuvent être utilisés pour plusieurs raisons :

• Améliorer la compatibilité avec certains navigateurs.
• Réduire la taille du CSS en supprimant la répétition et les espaces.
• Améliorer le confort de développement en ajoutant des fonctionnalités au CSS (fonctions, variables...).

Il existe d'ailleurs différents préprocesseurs qui peuvent être utilisés de manière indépendante ou combinée.

SASS, l'incontournable

SASS est un préprocesseur qui permet de travailler avec un langage différent du CSS : le SCSS. Ce langage ressemble a du CSS classique mais ajoute certaines fonctionnalités comme la possibilité d'imbriquer les règles ou la possibilité de créer des fonctions réutilisables.

$primary: #CCC;

@import "reset";

.btn {
  color: #FFF;
  background-color: $primary;

  &:hover {
    background-color: darken($primary, 10);
  }

  .icon {
    display:inline-block; 
  }
}

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

C'est un des préprocesseurs les plus utilisé aujourd'hui et il est assez simple d'utilisation. Je vous proposerais d'ailleurs une formation sur le sujet dans les jours à venir ;).

PostCSS, le couteau suisse

PostCSS est un préprocesseur qui se comporte comme une plateforme pour différents plugins. Son utilisation va du coup varier d'un développeur à l'autre mais certains plugins comme autoprefixer ou postcss-preset-env le rend incontournable. Il peut d'ailleurs être utilisé par dessus un autre préprocesseur pour ajouter les optimisations finales. Voici une liste des plugins que j'ai l'habitude d'utiliser :

• mqpacker permet de fusionner les media query.
• postcss-preset-env permet d'utiliser les nouvelles fonctionnalités du CSS tout en supportant les "vieux" navigateurs.
• autoprefixer permet d'ajouter les préfixes pour certaines propriétés.
• cssnano permet de "minifier" son CSS pour le rendre plus léger (en supprimant les espaces par exemple).

En revanche son utilisation peut s'avérer plus complexe que SASS car il faut avoir un environnement NodeJS et être capable de configurer les différents plugins à utiliser.

Less

Less offre des fonctionnalités similaires à SASS et il a été très populaire pendant un temps (car plus simple à installer que SASS à l'époque). Malheureusement il est aujourd'hui surclassé par SASS et je ne vois pas personnellement de raison de le préférer à SASS (c'est un avis personnel qui n'engage que moi).

@primary-color: seashell;
@primary-bg: darkslategrey;
@uploads: “../wp-content/uploads/”;

body {
  color: @primary-color;
  background: @primary-bg;
}

header {
  background-image: url(“@{uploads}/2018/03/bg-image.jpg);
}

Stylus

Stylus est une autre alternative à SASS écrit en JavaScript. Tout comme Less c'est un préprocesseur qui a été pertinent à l'époque ou SASS dépendait de Ruby pour fonctionner. Je ne l'ai jamais utilisé donc je ne saurais pas vous dire précisément ce qu'il peut apporter par rapport à SASS aujourd'hui.

font-color = skyblue
font-size = 12px

footer
   font font-size, Arial, sans-serif
   color font-color
   line-height 1.2em

.heading
   font  Arial, sans-serif
   font-size 20px
   color font-color
   line-height 1.2em

.sub-heading 
   color font-color
   font font-size Helvetica, Arial, sans-serif
   font-size:16px
   line-height:1.2em

nav 
  ul 
      list-style none
      margin 0
      padding 0  
   li  
     a
      color red
      display inline-block 
      padding 6px 12px

@mixin border-radius(radius) 
  -webkit-border-radius: radius
  -moz-border-radius: radius
  -ms-border-radius: radius
  border-radius: radius

.box
  border-radius(10px) 

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #373;
}
.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: orange;
}

.container { width: 100%; }

.main {
  float: left;
  width: 600px / 960px * 100%;
}

.sidebrar {
  float: right;
  width: 300px / 960px * 100%;
}

Est-ce nécessaire ?

A première vu on pourrait se dire que le CSS est assez complexe en lui même et ajouter un outil par dessus n'apporte qu'une couche de complexité supplémentaire.
Les préprocesseurs ne vont pas vous permettre de faire des choses que vous ne pourriez pas faire en CSS, ils vont surtout permettre d'améliorer votre productivité en vous permettant par exemple d'éviter la répétition (gràce à l'ajout automatique des préfixes, la déclaration de variables / fonctions...) et de mieux organiser votre code gràce au morcelement du code en plusieurs fichiers.