LESS est un outil JavaScript qui permet de créer dynamiquement des feuilles de style.
Il est basé sur du CSS, mais permet l’utilisation de variables simples, de variables complexes (mixins), l’héritage, la création de fonctions, etc.
Pour convertir une feuille LESS à un format CSS valide, il faudra utiliser un compilateur. Pour ce faire, plusieurs solutions sont possibles.
Solution 1 – Mise en place côté client
La méthode la plus directe, et la plus rapide, est d’inclure un fichier JavaScript après le fichier CSS dans le document HTML.
Pour mettre en place cette solution, il faut d’abord inclure le fichier LESS dans le document HTML. Notez l’attribut rel de la balise link.
<link rel="stylesheet/less" type="text/css" href="monStyle.less">
Puis faites appel au fichier less.js (disponible ici):
<script type="text/javascript" src="less.js"></script>
Cette solution n’est peut-être pas la plus efficace car le JavaScript doit analyser tout le contenu du fichier LESS pour le compiler. Plus le fichier est gros, plus le temps de compilation est long.
Solution 2 – Mise en place sur un serveur dédié
La solution la plus simple est d’utiliser Node.js (disponible ici) qui permet d’exécuter du code JavaScript côté serveur.
Cette solution permet de compiler le fichier .less en fichier .css en utilisant les ressources serveur plutôt que celles client. Vous pourrez permettre aux internautes de visualiser votre page correctement, même s’ils ont désactivé JavaScript.
Sachez que l’installation de Node.js est dépendante du serveur : si vous installez Node, vous installerez l’intégralité du framework.
Pour installer LESS côté serveur, tapez la commande suivante dans la console SSH :
$ npm install –g less
Après l’installation, LESS est utilisable en important, dans votre code, son module et en utilisant le compilateur :
var less = require(‘less’) ; less.render(style,callback) ;
Solution 3 – Mise en place côté serveur
Cette solution utilise le script LessPHP (disponible ici). Le fichier téléchargé est à inclure sur votre serveur.
De la même manière que les solutions JS, le script PHP va lire le fichier .less, le compiler et créer le fichier CSS valide. Pour utiliser cette solution, il faut inclure le fichier dans la page puis définir le fichier d’entrée (.less) et le fichier de sortie (.css) :
require 'lessc.inc.php';
try {
lessc::ccompile('monStyle.less', 'styleCompile.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}
Vous pouvez ensuite faire appel au fichier CSS compilé :
<link rel="stylesheet" type="text/css" href="styleCompile.css" />
Solution 4 – Compilation locale
Cette solution est la plus contraignante car il faut modifier le fichier LESS, qui devra être compilé sur votre ordinateur, et uploader le fichier CSS compilé après chaque modification.
Pour cette solution, vous pouvez utiliser l’outil SimpleLess. Cette technique ne reposant sur aucune technologie, le nombre de requêtes vers votre serveur va être réduite.
Maintenant que vous avez fait votre choix de compilation, nous allons nous pencher sur l’utilisation de LESS.
Basons-nous sur le code suivant :
HTML :
<!doctype html>
<head>
<link rel="stylesheet/less" type="text/css" href="monStyle.less">
<script type="text/javascript" src="less-1.3.0.min.js"></script>
</head>
<body>
<div class="bloc" id="bloc1"></div>
<div class="bloc" id="bloc2"></div>
</body>
</html>
CSS “general.css” :
.bloc {
width:100px;
height:50px;
background:#cccccc;
margin:20px;
float:left;
}
On obtient :
Les variables
Grâce à LESS, il est désormais possible de créer des variables CSS. C’est un avantage car cela permet de réutiliser plusieurs fois la même valeur et éviter les répétitions. Une variable est déclarée de la manière suivante : @nomVariable.
Dans le fichier .less la syntaxe sera la suivante. Nous nous baserons sur l’exemple ci-dessus pour changer la couleur des deux blocs :
@couleurParDefaut : #cccccc;
@nouvelleCouleur : #bbe2f2;
.bloc {background:@nouvelleCouleur;}
Après compilation, le CSS externe nommé « custom.css » obtenu sera :
.bloc
{
background:#bbe2f2;
}
Le résultat obtenu sera :
Les Mixins
Les mixins sont semblables aux variables mais elles peuvent contenir plusieurs propriétés ou valeurs.
Dans le fichier .less la syntaxe sera la suivante. Nous nous baserons sur l’exemple ci-dessus pour changer la forme d’un des deux blocs :
.border-radius(@radius){
Border-radius :@radius ;
-moz-border-radius@radius;
-webkit-border-radius :@radius ;
}
#bloc1{. border-radius(4px) ; }
Après compilation du fichier .less, le css custom obtenu sera :
#bloc1{
Border-radius :4px;
-moz-border-radius :4px;
-webkit-border-radius :4px;
}
Le résultat obtenu sera :
L’héritage
L’avantage de l’héritage avec LESS est que cela permet d’avoir un code moins répétitif et plus clair.
Exemple d’un code sans LessPHP :
#content1 #bloc1 p, #content1 # bloc2 p, #content1 # bloc3 p, #content1 #bloc4 p{
color :#000 ;
text-decoration :none ;
}
#content1 #bloc1 a, #content1 #bloc2 a, #content1 #bloc3 a, #content1 #bloc4 a{
color :#fff ;
}
Grâce à l’héritage, le code sera écrit de la manière suivante :
#content1
{
#bloc1,#bloc2,#bloc3,#bloc4
{
p
{
color:#000;
text-decoration:none;
}
a
{
color:#FFF;
}
}
}
Mon avis
Je trouve que cet outil est très utile. Il permet de simplifier le code CSS en utilisant des variables, fonctions… C’est un gain de temps non négligeable.
Prenons un exemple : imaginez que vous devez changer le style de plusieurs sites, ayant exactement la même structure mais aux couleurs de textes différentes. Vous pourrez donc créer un fichier CSS commun à tous les sites et un fichier less par site pour traiter les différences de styles.
Cet outil est donc très utile et simple à utiliser. Je vous le recommande !
Visitez le site officiel pour plus d’informations : http://lesscss.org
