Concevoir un site web, faire plus avec LESS

Pour mettre en page pour le Web, les règles CSS sont incontournables mais pas sans inconvénients. On s’en rend vite compte quand on veut créer une palette de couleurs ou réutiliser un groupe de styles. Une situation qui est en train d’évoluer depuis quelques années avec l’arrivée de nouvelles solutions dont une est particulièrement intéressante: LESS.

Les limitations des CSS

Les feuilles de style (CSS, Cascading Style Sheets) sont un outil puissant permettant de séparer la forme du fond. Malheureusement il souffre de plusieurs limitations qui rendent son usage malaisé.

Le premier problème auquel l’on est confronté, est l’impossibilité de créer ses propres constantes et de les réutiliser. Impossible, par exemple, de définir une palette de couleurs. La seule solution consiste à réutiliser les mêmes valeurs sans se tromper. Impossible donc de changer simplement une palette de couleurs pour créer un autre thème.

Un autre problème récurrent est l’impossibilité de nommer et réutiliser un groupe de règles pour l’appliquer ailleurs. Seule solution: créer une classe et l’utiliser dans le document HTML.

CSS et les autres langages de style

Cette limitation est à l’inverse des autres langages, en particulier de programmation. En effet, tous ou presque, permettent de nommer et de réutiliser des entités. Ce sont par exemple des constantes, des fonctions ou encore des structures. Cette différence peut étonner mais offre également des pistes intéressantes pour répondre aux limitations des CSS.

LESS qu’est-ce que c’est?

LESS est un préprocesseur pour les CSS qui étend la syntaxe de base en ajoutant des instructions. Il permet, par exemple, de créer des constantes qui seront remplacées par leurs valeurs numériques pour générer une feuille de style classique.

Une des grandes qualités de LESS est qu’il étend la syntaxe CSS avec de nouvelles instructions mais ne les remplace pas. Toutes les séquences CSS restent valides en LESS. Il n’est donc pas nécessaire d’apprendre complètement un nouveau langue.

Autre avantage de LESS: il génère des feuilles de styles classiques. Il n’y a donc pas de problèmes de compatibilité avec les technologies existantes.

LESS, quelles fonctionnalités ?

LESS permet de créer et réutiliser des constantes.

@my_color: #cc0066;

h2 {
  color: @my_color;
}

LESS permet de créer des séquences (mixin) et de les réutiliser. Il permet également de paramétrer ces séquences comme on le ferait avec une fonction.

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.button {
  .rounded-corners(10px);
}

LESS permet d’imbriquer des éléments entre eux au lieu de répéter les sélecteurs CSS.

body {
  h1 {
    font-size: 24pt;
    font-weight: bold;
  }
  p {
     font-size: 12pt;
     margin-bottom: 1em;
  }
}

Enfin LESS permet d’utiliser des expressions numériques comme addition, multiplication, etc.

Comment l’utiliser?

Le moteur de LESS est écrit en JavaScript, pour l’utiliser il suffit d’ajouter les bonnes références dans la page. C’est une caractéristique importante: on peut l’utiliser sans être dépendant du serveur et du langage de programmation utilisé.

Une autre solution est de compiler (transformer) les code LESS en CSS au niveau du serveur et d’utiliser le résultat comme on le ferait avec n’importe quel fichier CSS. On peut utiliser pour cela node.js.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

LESS ou SASS

LESS est inspiré de SASS, un autre préprocesseur CSS qui est apparu avec le langage de programmation Ruby. La question de savoir lequel utiliser se pose: ce sont tous deux de bonnes solutions. La réponse dépend, en bonne partie, du goût de chacun mais LESS dispose d’un avantage important: contrairement à SASS il n’a pas besoin de Ruby pour fonctionner. Il est donc plus simple à mettre en œuvre pour ceux qui n’utilisent pas ce langage.

Ressources

LESS
Le site web de LESS. On y trouve la documentation, des exemples ainsi que la librairie à installer.

SASS – Syntactically Awesome Stylesheets
Les personnes intéressées peuvent se rendre sur le site de SASS. On y trouve toutes les informations nécessaires ainsi qu’un compilateur en ligne, bien pratique pour faire des tests sans devoir installer Ruby. On notera qu’il existe deux syntaxes. La première, historique, s’inspire de langages comme HAML et YAML. La deuxième est directement inspirée de LESS.

Twitter Bootstrap
Twitter Bootstrap est un framework CSS bien connu, qui utilise LESS. On peut soit télécharger la version finale (les fichiers CSS) soit les fichiers LESS.

Node js
Est un moteur JavaScript qui s’exécute côté serveur. Il permet de compiler les fichiers LESS en CSS.

W3 Schools
Documentation et tutoriaux sur les CSS.

W3 CSS
Le site officiel sur les CSS.