“SASS VS LESS” La guerre des PréProcesseurs CSS


Technique

SASS et LESS sont les préprocesseurs CSS les plus réputés sur la Toile. Ils permettent dans une certaine mesure d’ajouter des méthodes de développement essentielles comme l’utilisation de variables, mais surtout d’éviter la répétition de code.

Le principal intérêt d’utiliser un préprocesseur CSS est de pouvoir avoir des variables dans le CSS. Ils apportent les fonctionnalités suivantes : nested rules, variables, mixins, selector inheritance, et bien d’autres.

LESS

LESS est peut-être le plus connu des deux, rendu célèbre entre autres grâce à Twitter Bootstrap (https://twitter.github.com/bootstrap/), ce qui a propulsé l’utilisation des préprocesseurs CSS pour la plupart des frameworks (Foundation, bootstrap, etc.), mais aussi des différents thèmes que l’on peut maintenant trouver sur le web (ex. https://wrapbootstrap.com/).

Concrètement, il sera possible d’utiliser des variables, des mixins, mais aussi de l’héritage simplement en imbriquant des blocs entre eux.

L’avantage de LESS est de pouvoir garder une syntaxe très proche du CSS, ce qui signifie qu’il est évident de débuter avec celui-ci et qu’il devient très simple de le comprendre mais aussi de reprendre du code (amélioration de la maintenabilité du code).

Nous vous invitons à aller voir le code de Twitter Bootstrap sur Github (https://github.com/twitter/bootstrap/blob/master/less/popovers.less) pour vous faire une idée précise de la structure du code sur un projet de grosse ampleur.


SASS

SASS peut s’écrire de deux façons :

– En utilisant la syntaxe standardisée du CSS – dans ce cas les fichiers porteront l’extension .scss pour “Sassy CSS”.

– Ou alors en utilisant une syntaxe plus ancienne et moins proche du CSS, dans ce  cas les fichiers auront l’extension .sass.

Dans l’introduction nous avons parlé des variables, voici un petit exemple d’utilisation de variable en SASS :

<code>

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;

body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}

</code>


Un autre point intéressant des préprocesseurs est ce qu’on appelle “Nesting” qui permet d’écrire plus rapidement des enchainements CSS afin définir de façon plus visible à quel groupement d’éléments HTML on applique la régle CSS :

<code>

section {

 margin: 10px;

 nav {

   height: 25px;

   a {

     color: #0982C1;

     &amp;:hover {

       text-decoration: underline;

     }

   }

 }

}


</code>


Installation

Il faut commencer par installer ruby, puis le gem sass. Une fois ces deux opérations menées, il ne reste plus qu’à écrire le fichier SASS, puis le compiler grâce à la commande :

<code>sass –watch style.scss:style.css</code>

Sass surveillera ainsi votre fichier scss et créer les fichier style.css à chaque enregistrement.


Conclusion

Après avoir étudié les deux préprocesseurs CSS, voici une synthèse listant les avantages et les inconvénients de chacun d’entre eux afin que vous puissiez choisir celui qui vous conviendrait le mieux :

  • SASS

Avantages

– Créé en premier, SASS possède un grand nombre de fonctions et est donc plus mature

– Il est supporté par le framework Foundation (https://foundation.zurb.com/)

Inconvénients

– Nécessité d’installer Ruby pour pouvoir installer la gem Sass

– Compilation en css en ligne de commande

  • LESS

Avantages

– Utilisé par le framework Bootstrap de Twitter

– Compilation à l’aide d’application (SimpLESS, {Less})

Inconvénients

– Moins complet que SASS

Tenez-nous au courant !

 

 

 

Laisser un commentaire