LESS: un préprocesseur CSS pour rendre vos styles dynamiques
Page 2: Installation de LESS
Toutes les pages 
LESS: un préprocesseur CSS pour rendre vos styles dynamiques
Page 2
Installation de LESS
Installation de LESS
Installation et mise en marche
LESS est un langage qui permet de générer dynamiquement des styles CSS. Malheureusement il n'est pas compréhensible par les navigateurs qui reconnaissent uniquement le résultat de sa compilation (le CSS). Alors avant de s'en servir il faut l'installer. Pour cela il existe trois façons de faire.Compilation manuelle
Dans ce cas de figure on peut procéder comme si on programmait avec un langage compilé comme C ou C++. Vous avez le code source à votre disposition, c'est lui que vous modifiez quand vous avez besoin de générer de nouveaux styles (ou de modifier un CSS existant). Après édition du code, vous compilez et vous obtenez votre fichier CSS que vous pouvez ensuite réhéberger sur le serveur.Visiblement c'est une solution très abordable bien que son seul inconvénient c'est qu'il faut replacer le fichier CSS généré sur le serveur après chaque modification.
Il existe de nombreux outils qui permettent de compiler manuellement un fichier LESS, j'en site Koala et CodeKit.
Notez qu'un fichier LESS est suffixé par l'extension .less (que le navigateur ne reconnait pas), on peut dire que c'est le fichier qui contient le code de travail (code source). Après sa compilation par l'un de ces outils on obtient le fichier CSS que l'on pourra ensuite intégrer à l'aide de la balise:
<link rel="stylesheet" type="text/css" href="style_css_généré.css" />
Compilation par le serveur
Il s'agit là de faire compiler le fichier LESS par le serveur lui même pour en générer le fichier CSS final. Cependant, le meilleur compilateur LESS existant est pris en charge par la plateforme Node.js (qui se sert du Javascript comme langage coté serveur).Il existe aussi LessPHP qui est un compilateur LESS que l'on peut installer sur des plateformes PHP. Et j'en passe...
Compilation par le client
C'est une solution très pratique si on est en mode développement (ou pour apprendre à coder en LESS) mais pas autant en mode production, puisqu'elle engage le navigateur à procéder à la compilation, ce qui peut avoir des effets sur les performances de celui-ci.Cette solution s'appuie sur l'exécution d'un code Javascript qui se charge de lire le fichier LESS et le compiler pour en générer le code CSS qui est exécuté à la volée par le navigateur (donc le fichier .css n'est pas vraiment créé en dur suite à la compilation de LESS).
Le code javascript à exécuter est disponible ici less.js. Une fois téléchargé, il faut l'inclure dans les pages dans la balise <head> comme ceci:
<head>
<script src="less.min.js"></script>
<!-- Il faut veiller à remplacer less.min.js par le chemin du fichier téléchargé -->
</head>
Une autre solution plus pratique c'est de se servir du CDN en déclarant le code suivant:
<script src="less.min.js"></script>
<!-- Il faut veiller à remplacer less.min.js par le chemin du fichier téléchargé -->
</head>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<!-- Ce CDN provient du site officiel de Less (lesscss.org). Il serait judicieux de s'y rendre pour vérifier la bonne source -->
</head>
Maintenant que le fichier .js est intégré il faut déclarer la balise qui permet de spécifier le chemin du fichier .less à exécuter comme ceci:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<!-- Ce CDN provient du site officiel de Less (lesscss.org). Il serait judicieux de s'y rendre pour vérifier la bonne source -->
</head>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="style.less" />
</head>
Vous avez certainement remarqué que la balise <link> ressemble beaucoup à celle utilisée pour inclure une feuille de style CSS classique à quelques différences prés:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="style.less" />
</head>
- La valeur de l'attribut rel devient "stylesheet/less" au lieu de "stylesheet"
- L'attribut href fait référence à un fichier .less et non pas .css
Pour ma part je vous recommande cette dernière méthode (compilation par le client) pour apprendre à coder en LESS.
Page 2
Installation de LESS
Installation de LESS
