LESS versus SASS

Nous vous proposons aujourd’hui un comparatif entre deux préprocesseurs dont nous avons déjà parlé : LESS et SASS (combiné à Compass).

Pour rappel, un préprocesseur CSS est un outil qui permet de transformer un langage particulier en CSS valide. Ces préprocesseurs CSS vous permettent de créer des feuilles de styles plus maintenables. Quelque soit le préprocesseur choisi, la syntaxe du langage est relativement proche de celle de la CSS.

Pourquoi l’utilisation d’un préprocesseur est-il conseillé ?

Au fil du temps, la confection d’un code CSS se complexifie du fait de l’augmentation du nombre de règles, du nombre de fichiers, des effets CSS3, du debug cross-browser, etc… Ces différents facteurs ont un impact direct sur la maintenabilité de vos CSS. Grâce à l’utilisation d’un préprocesseur, vous pourrez éviter les répétitions de valeurs (codes couleurs, dimensions…), regrouper des propriétés des règles CSS et organiser au mieux votre intégration.

Installation

L’étape fondamentale, pour pouvoir utiliser ces préprocesseurs, est l’installation. SASS et LESS sont construits sur deux technologies différentes.

SASS nécessite l’utilisation de Ruby, ce qui signifie qu’il vous faut l’installer préalablement sur votre poste. Pour retrouver le détail de l’installation de Ruby, cliquez ici.

LESS est basé sur le langage JavaScript. Plusieurs possibilités s’offrent à vous quant à la compilation de vos fichiers LESS. Pour (re)découvrir les différentes mises en place, rendez-vous ici.

Extensions

Les deux préprocesseurs ont des extensions qui rendent le développement web plus rapide et plus facile.

Comme présenté dans un article précédent, Compass est l’extension la plus populaire pour SASS. Elle offre de nombreuses fonctions réutilisables afin de palier à certains problèmes de compatibilités navigateurs mais également des fonctionnalités très utiles comme des aides, mises en page, typographie…

LESS dispose également de plusieurs extensions, mais contrairement à Compass, où tout est centralisé, les extensions de LESS sont séparées car elles ont été créées par différents développeurs. Pour les utilisateurs chevronnés cela ne posera aucun problème. En revanche, pour ceux qui souhaitent débuter avec LESS, ils auront besoin de temps pour choisir la bonne extension.

Langages

Chaque préprocesseur CSS a son propre langage mais ont tous une syntaxe similaire, proche du CSS.

Utilisation des variables

Que ce soit avec SASS ou LESS, vous pouvez (et vous devez) utiliser des variables. La seule différence concernant la déclaration et l’utilisation des variables porte sur leur écriture : avec SASS, vous devez préfixer vos variables avec « $ » et pour LESS avec « @ ».

Mixins

Les mixins sont des fonctions qui permettent la réutilisation de propriétés dans les feuilles de styles. L’avantage des mixins porte principalement sur le code : il est plus court et plus facile à modifier.

Leur écriture diffère en fonction du langage choisi :

Avec SASS, vous devez déclarer que vous écrivez une mixin avec le mot clé « @mixin ». Tandis qu’avec LESS, vous écrivez votre mixin telle une classe CSS. L’utilisation d’une mixin via SASS s’effectue grâce au mot clé « @include » alors qu’avec LESS vous appelez simplement le nom de la mixin.

Voici un exemple d’utilisation de mixins avec arguments :

Le partage de propriétés

SASS vous offre, contrairement à LESS, la possibilité de partager un ensemble de propriétés CSS à un autre sélecteur. Pour cela, il faut utiliser @extend.

Manipulation des couleurs

SASS offre une gamme complète d’outils pour manipuler les couleurs. Toutes les représentations de couleurs (couleurs nommées, hex, rgb, rgba, hsl, hsla) sont interprétées. SASS offre de nombreuses fonctions pour les couleurs qui n’existent pas en CSS, par exemple : (attention, cette liste n’est pas exhaustive)

• lighten($color, $amount)
• darken($color, $amount)
• saturate($color, $amount)
• desaturate($color, $amount)
• adjust-hue($color, $amount)

Sachez que LESS, propose approximativement ces mêmes fonctions grâce à cette librairie de fonctions. 

Manipulation de nombres

Les deux préprocesseurs vous permettent d’utiliser des nombres et des fonctions arithmétiques de base. Cependant, ils diffèrent sensiblement par rapport à la façon dont ils gèrent les unités.

SASS connait les bases de l’arithmétique. Les unités complexes sont prises en charge puis SASS possède également des tables de conversion, de sorte que toutes les unités comparables peuvent être combinées. Ce préprocesseur vous permettra aussi de définir vos propres unités et se fera un plaisir d’imprimer des unités inconnues dans votre CSS.

En revanche, LESS ne gère que les unités simples et de même type.

Structures conditionnelles et boucles

LESS ne propose aucune structure conditionnelle, ni de type logique booléenne (<,>, <=,> =, ==). Il ne gère pas non plus les opérateurs de comparaison, contrairement à SASS.

Exemple de structure conditionnelle :

@if lightness($color) > 30% {
 background-color: back;
}
@else {
 background-color: white;
}

Exemple de boucle :

@for $i from 1px to 10px {
  .border-#{i} {
    border: $i solid blue;
  }
}

A travers cet article, nous comprenons que les deux préprocesseurs permettent :

• de gagner du temps
• d’écrire un code facilement lisible en évitant les répétitions
• de bénéficier de feuilles de styles facilement modifiables

Notez que le préprocesseur LESS est vieillissant et relativement lent car il interprète toutes ses variables avant de commencer à créer les règles CSS.

Voici un tableau récapitulatif des points forts et des points faibles des deux préprocesseurs : 

A travers ce tableau comparatif, nous en déduisons que SASS est plus puissant que LESS. En termes de lisibilité, nous trouvons que SASS est peut-être un peu « verbeux » mais plus simple à comprendre, à lire et à écrire. En effet, le fait de devoir utiliser des termes précis permet de mieux appréhender la syntaxe de SASS, contrairement à celle de LESS : toutes les déclarations sont semblables à l’écriture de classe (avec un « . » dans le fichier CSS)