Accueil Nos publications Blog Préprocesseurs CSS : LESS vs Sass

Préprocesseurs CSS : LESS vs Sass

Sass vs LESS Le CSS c’est cool, mais avec Sass et LESS c’est mieux.

Pourquoi ? Le but de cet article est de vanter les mérites de LESS et Sass (Syntactically Awesome Stylesheet), deux langages de génération dynamique de CSS.

Ces deux préprocesseurs CSS permettent uniquement d’améliorer la syntaxe du langage sans toucher à ses fondamentaux ni à ses possibilités qui sont dépendants du standard défini par le W3C.

Pourquoi utiliser un préprocesseur CSS ?

Les préprocesseurs CSS permettent d’optimiser le code en amont et sont transparents pour le navigateur et donc pour l’utilisateur (rendez vous sur un site qui utilise Sass ou LESS et inspecter l’élément, vous ne verrez que le CSS généré).

Installation et utilisation

LESS est implémenté en JavaScript. Il faut créer un fichier .less et charger un script JavaScript sur la page pour apporter le style à la page. Par conséquent sans javascript, pas de styles.

Il est également possible de compiler systématiquement les fichiers .less grâce à des GUI comme SimpLESS (multi OS) / Crunch (multi OS) / CodeKit (Mac) / WinLESS (Win) pour inclure le fichier CSS précompilé dans la page et éviter l’appel JavaScript.

Sass est implémenté en Ruby. Il est nécessaire d’installer Ruby pour pouvoir installer la gem Sass (Edit 10/08/2015 – merci Olivier : Il est maintenant possible de profiter de SASS sans Ruby grâce à libSASS qui est écrit en C. Il existe également une version ‘wrapper’ Node.js : Node-SAAS). Il existe également des outils pour compiler les fichiers en .CSS à chaque sauvegarde automatiquement (Compass.app (Win, Mac) / LiveReload (Win, Mac) / CodeKit (Mac)).

Fonctionnalités et particularités

LESS utilise l’extension .less tandis que Sass propose deux formats de fichiers : le .scss (Sassy CSS, CSS fougueux… !) et le .sass (inspiré par HAML). Les fichiers .sass sont identiques aux fichiers .scss mais les accolades sont remplacées par des tabulationx et les points-virgules par des retours à la ligne.

Variables

LESS et Sass permettent de stocker des constantes dans une variable précédée de @ pour LESS et $ pour Sass.

L’utilisation de @ pour LESS peut toutefois paraitre troublante car elle n’a rien à voir avec l’utilisation de @ pour la déclaration de media queries (@media) où pour la création d’animations (@keyframes).

Il y a une petite différence entre LESS et Sass. Quand on surcharge une variable globale localement, la variable globale prend la valeur locale, ce qui n’est pas très intuitif :


$color: red;
.classe-a {
  $color: blue;
  color: $color;
}
.classe-b {
  // LESS = red (global)
  // Sass = blue (surchargée par la variable locale)
  color: $color;
}

Imbrication

LESS et Sass permettent d’imbriquer du code de la même manière :


nav {
  width: 940px;
    ul {
    padding: 0;
  }
}

est compilé en


nav {
  width: 940px;
}
nav ul {
  padding: 0;
}

Cependant, Sass va plus loin en permettant d’imbriquer des propriétés :


nav {
  width: 940px;
  ul{
    padding: 0;
  }
  border {
    style: solid;
    right {
      width: 2px;
      color: $color;
    }
  }
}

est compilé en


nav {
  width: 940px;
  border-style: solid;
  border-right-width: 2px;
  border-right-color: red;
}
nav ul {
  padding: 0;
}

Il est également possible d’imbriquer des media queries, ce qui permet de voir bien plus simplement les différences d’affichage entre le style original et le style responsive :


.classe-a{
  // style original
  @media (max-width: 800px) {
  // style responsive
  }
}

Mixins

CSS ne supporte pas encore les mixins. Un mixin est une classe destinée à être composée par héritage multiple avec une autre classe pour lui apporter des fonctionnalités.

C’est un cas de réutilisation d’implémentation. Ils permettent ainsi une meilleure maintenabilité du code car il suffit de modifier le code à un seul endroit.

Ici aussi, les syntaxes sont différentes entre LESS et Sass. Sass utilise @mixin et less utilise la déclaration de classe :


@mixin bordure($valeur) {
  border-radius: $valeur;
}
nav {
  @include bordure(10px);
}

.bordure(@valeur) {
  border-radius: @valeur;
}
nav {
  .bordure(10px);
}

Bien entendu, les mixins sont utilisables sans paramètres. Une fois de plus, Sass va un peu plus loin avec l’héritage de sélecteurs. Plus besoin de copier/coller tous les styles d’un sélecteur dans un autre, il y a @extend :


.classe-a {
   width: 100px;
}
.classe-b {
   border: 1px solid $red;
   @extend .classe-a;
}

est compilé en


.classe-a, .classe-b {
   width: 100px;
}
.classe-b {
   border: 1px solid $red;
}

Contrairement à LESS, avec @extend Sass ne duplique pas le code de .classe-a dans .classe-b, le sélecteur .classe-a est altéré en .classe-a, .classe-b et seuls les styles particuliers à .classe-b y restent.

Opérations mathématiques / logique & boucles

Maths


$marge: 20px;
div {
  margin: $marge - 10%;
}

Ici il y aura une erreur de compilation sur la marge en Sass car les unités sont différentes mais LESS garde la première unité en référence, c’est à dire que le code est équivalent à 10px – 10px = 0px. Oui, c’est bizarre mais c’est comme ça !


$bleu= #0000FF;
$bleuclair= lighten($blue, 10%);
$bleufonce= darken($blue, 10%);

L’exemple ci-dessus montre également comment aller plus vite, plus besoin de chercher 1000 couleurs pour faire des dégradés, les fonctions lighten et darken sont là pour ça !

Logique & boucles

LESS et Sass permettent d’insérer de la logique dans le code :


.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
  background-color: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
  background-color: white;
}
.classe-a {
  color: #BADA55;
  .set-bg-color(#BADA55);
}

@mixin set-bg-color($color) {
  @if lightness($color) >= 50% {
    background-color: black;
  } @else {
    background-color: white;
  }
}
.classe-a {
  color: #BADA55;
  @include set-bg-color(#BADA55);
}

Ici, on adapte le background de .classe-a en fonction de la clarté du texte. Si le texte est clair on met un background blanc, sinon noir.

On remarque que Sass est plus intuitif et permet d’utiliser des conditions de type if/if else/else, ce qui est bien plus lisible que ce que LESS a à offrir. Il en est de même avec les boucles, Sass est plus robuste et même si nous sommes d’accord que les boucles en CSS ce n’est pas indispensable, il est toujours pratique de savoir que ça existe : Sass permet de faire des boucles de type @for, @each, @while :


$columns: 4;
@for $i from 1 through $columns {
  .cols-#{$i} {
    width: ((100 / $columns) * $i) * 1%;
  }
}

est compilé en


.cols-1 {
  width: 25%;
}
.cols-2 {
  width: 50%;
}
.cols-3 {
  width: 75%;
}
.cols-4 {
  width: 100%;
}

A noter qu’on a ici utilisé la concaténation, qui marche à merveille avec Sass en utilisant tout simplement #{$ma-variable}.

LESS ne permet pas exactement de faire des boucles, on doit utiliser une fonction récursive et oui, ce n’est pas idéal :


@columns: 4;
.loopWidthColumn (@i) when (@i > 0) {
  (~".cols-@{i}"){
    width: ((100 / @columns) * @i) * 1%;
  }
  // Fonction récursive qui s'appelle elle même
  .loopWidthColumn (@i - 1);
}
// on arrête la boucle
.loopWidthColumn  (0) {}</p>

<p>// 1er appel de la boucle
.loopWidthColumn  (@columns);

Extensions

LESS et Sass ont tous les deux des extensions disponibles pour faciliter le développement.

La principale extension pour Sass est Compass. Compass met à disposition de nombreux mixins pour écrire du CSS plus vite mais pas seulement. Il propose également des helpers, layouts, aides à la typographie, système de grille, des sprites pour les images, etc. En résumé, il y a tout ce que vous cherchez dans Compass !

LESS a de nombreuses extensions mais contrairement à Sass, elles n’ont rien à voir entre elles et sont développées par des équipes distinctes : il faut prendre du temps pour choisir ce dont on a besoin. Parmis les plus importantes :

Par exemple en utilisant Sass avec le framework Compass, vous obtenez un mixin background qui permet d’éviter d’avoir à gérer les problématiques cross browser avec les vendor prefixes :


.classe-a {
  @include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

est compilé en


.classe-a{
  background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}

Magnifique, hein?

Conclusion

L’utilisation de préprocesseurs CSS permet de mettre en place une optique DRY (Don’t Repeat Yourself) dans le code grâce aux mixins et à l’imbrication du code.

Ils sont très utiles bien que pas indispensables si vous travaillez sur des projets de petite envergure.

L’utilisation de variables, de boucles et de logique, les extensions disponibles et la facilité d’installation et de prise en main sont autant d’arguments en faveur de l’utilisation d’un préprocesseur CSS.

Il semble que Sass soit plus mature et plus intuitif que LESS et son utilisation avec Compass est un bonheur bien que moins évident à prendre en main que LESS.

Bien entendu il vous reste à lire les docs pour vous rendre compte de la puissance de ces préprocesseurs, je n’ai montré ici qu’une infime partie de ce qu’il est possible de faire!

Le mot de la fin : LESS est plus adapté aux débutants, Sass est plus high-level, mais si vous utilisez déjà LESS, pas de panique au moins vous préprocessez!

Pour commencer avec LESS, c’est ici.

Pour Sass, c’est  ou pour des super tutos avec Compass.

© SOAT
Toute reproduction interdite sans autorisation de la société SOAT