CSS, le langage qui permet la mise en forme des pages web, est un outil puissant et qui évolue dans le bon sens avec la version 3. Cependant, le langage a encore quelques lacunes que les préprocesseurs CSS tentent de résoudre. Ce sont des « surcouches » à CSS qui permettent de rajouter des fonctionnalités non fournies de base. Vos fichiers seront codés dans le langage du préprocesseur et compilé en CSS (de la même façon qu’il existe des surcouches à JavaScript comme CoffeeScript, TypeScript ou Dart). Il existe plusieurs préprocesseurs, les plus connus étant :
Dans cet article, j’ai porté mon choix sur LESS qui semble être le plus utilisé et qui permet une utilisation sans compilation.
Les fichiers ne sont plus des .css mais des .less (.scss en SASS et .styl en Stylus).
LESS est codé en JavaScript et fonctionne donc coté serveur avec node.js ou Rhino et coté client, directement dans le navigateur.
Il existe cependant des portages pour les autres technologies serveurs :
LESS ajoute les fonctionnalités suivantes que ne sont pas fournies pas CSS :
- L’utilisation de variables
- Mixins (fonctions)
- Les règles imbriquées afin calquer la structure de votre page
- des opérateurs mathématiques simple: +, -, *, / pour les nombres et les couleurs
- des opérateurs mathématiques complexe comme floor(), ceiling() et round()
- des opérations sur les couleurs comme darken(), lighten(), fadein() et fadeout()
Variables
LESS permet l’utilisation des variables, une des fonctionnalités les plus demandées par les développeurs CSS. Une variable est préfixée par un @. Cela peut s’avérer très pratique si l’on veut gérer des thèmes de son site. Au lieu de devoir modifier toutes les couleurs dans tous les styles, il suffit de modifier les valeurs des variables.
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
donnera en css :
/* Compiled CSS */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Mixins
Les mixins sont des fonctions auxquelles on peut passer des paramètres. Il est possible de définir une valeur par défaut qui sera utilisé si le paramètre n’est pas fourni. La syntaxe d’un mixin est proche de la déclaration d’une classe. Cela s’avère très utile notamment lors d’utilisation de fonctionnalités CSS3 utilisant des préfixes.
// LESS
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10);
}
donnera en css :
/* Compiled CSS */
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Il est à noter qu’il est possible de définir des règles d’applications (pattern-matching-and-guard-expressions) qui rendent ces mixins encore plus puissants.
Règles imbriquées
On veut très souvent en CSS appliquer un style pour des éléments imbriqués dans d’autres éléments. La règle CSS peut devenir importante (#menu ul li a.item). Les règles imbriquées permettent de cloisonner une règle dans son parent permettant ainsi de limiter le code. Cela permet d’avoir un code plus lisible et plus structuré/organisé.
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
donnera en css :
/* Compiled CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Opérations
LESS fournit également un ensemble d’opérations qu’il est possible d’effectuer sur les couleurs, les variables et les valeurs numériques.
Les opérations mathématiques « de base » comme l’addition, la soustraction, la multiplication et l’addition ainsi que quelques opérations plus complexe comme les arrondis (floor, ceil et round).
Les fonctions possibles sur les couleurs sont :
- darken(@color, 20%); : retourne une couleur 20% plus sombre
- lighten(@color, 20%); : retourne une couleur 20% plus claire
- fadein(@color, 20%); : retourne une couleur 20% plus transparente
- fadeout(@color, 20%); retourne une couleur 20% moins transparente
- fade(@color, 80%); : retourne une couleur avec 80% de transparence
- spin(@color, 10); : retourne une couleur avec une teinte plus importante de 10 degrés que la couleur @color
- mix(@color1, @color2, @weight); : retourne une couleur résultant du mélange de 2 couleurs avec un % de mélange (50% par défaut)
- Récupération des données d’une couleur (RGBa ou HSLa)
- hue(@color); : retourne le canal « teinte » de la couleur (HSLa)
- saturation(@color); : retourne la saturation de la couleur (HSLa)
- lightness(@color); : retourne la clarté de la couleur (HSLa)
- alpha(@color); : retourne le canal alpha de la couleur (HSLa ou RGBa)
- red(@color); : retourne la canal rouge de la couleur (RGBa)
- green(@color); : retourne le canal vert de la couleur (RGBa)
- blue(@color); : retourne le canal bleu de la couleur (RGBa)
Les fonctions sont très pratiques et apporte un réel plus combinées avec les variables, comme pour créer des dégradés (gradient) par exemple.
/* J'ai volontairement omis les prefixes vendeurs */
background: linear-gradient(top, @color, darken(@color, 20%));
Voici d’autres exemples d’utilisation de ces fonctions :
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
donnera en css :
/* Compiled CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
@Import
Il est possible d’importer des fichiers LESS via la syntaxe @import comme il est possible de le faire en CSS. L’avantage est la compilation ne générera qu’un seul fichier CSS en sortie, limitant le nombre de requêtes au serveur.
Twitter BootStrap (framework CSS) utilise LESS et est découpé en plusieurs fichiers .less permettant une maintenance plus aisée.
Utilisation
Via JavaScript
Pour une utilisation coté client de LESS, il est nécessaire d’inclure le fichier JavaScript less.js. Celui-ci doit être placé après l’inclusion de vos fichier .less. Les styles doivent être déclarés avec rel= »stylesheet/less ».
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
Via Compilation en CSS
Il est également possible d’utiliser LESS coté serveur afin de compiler les fichiers .less en un fichier CSS. Cette compilation peut se faire à la volée par le serveur ou au préalable.
Ressources
Conclusion
Les préprocesseurs CSS s’avèrent très pratique et permettent une meilleure organisation et maintenabilité de votre code CSS.
Il faut espérer que la norme CSS intégrera ces fonctionnalités dans le futur afin de pouvoir profiter de ces ajouts sans surcouche.
