Le CSS est un langage déclaratif simple : la plupart du temps, on applique une valeur à une propriété. Mais de nos jours, avec le développement des attributs propriétaires (vous savez, les fameux -moz-*, -webkit-* et autres), le code se trouve dupliqué en de nombreux endroits.
En voici un exemple typique :
#foo {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* etc. */
}De même, il est impossible d’imbriquer des sélecteurs en CSS :
/* Impossible d’écrire ceci : */
#foo {
bar {
color: #150;
}
baz::before {
content: '[';
}
baz::after {
content: ']';
}
}
/* Il vous faudra écrire ceci : */
#foo bar{
color: #150;
}
#foo baz::before {
content: '[';
}
#foo baz::after {
content: ']';
}Enfin, imaginons le cas où il vous faudrait définir une palette de couleurs pour votre site. À chaque changement de couleur, vous devriez éditer vos fichiers à l'aide de la fonction « rechercher / remplacer ». Quelle perte de temps !
Des gens intelligents se sont donc penchés sur la question, et en ont retiré l’observation suivante : « Nous devrions créer un langage dynamique capable de générer des feuilles de style que les navigateurs pourraient comprendre. »
Ainsi naquit LESS.
Citation : lesscss.org
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
Citation : traduction
LESS étend le CSS avec un comportement dynamique, utilisant des variables, des classes abstraites, des opérations et des fonctions. LESS fonctionne aussi bien côté client (IE version 6 et +, Webkit [Ndt : Safari, Chrome, Midori], Firefox) que côté serveur, avec Node.js.
Il est à noter qu’il existe également des implémentations non officielles en PHP, Ruby, Python, etc.
Commençons dès à présent avec l’installation de LESS.
