Less est un langage de préprocesseur CSS. Il étend le langage CSS avec des variables, des mixins, des fonctions, etc. Cela facilite la maintenance, la création de thèmes et l'extension du CSS.

Less fonctionne sur Node, dans le navigateur et sur la plateforme Rhino. De nombreux outils tiers aident à compiler le code source Less.

Exemple :

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Résultat de la compilation

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Less fonctionne en ligne de commande via npm. Il se télécharge aussi comme fichier de script dans le navigateur. Il s'intègre également dans de nombreux outils tiers. Consultez la section Utilisation.

Installation

Le moyen le plus simple d'installer Less côté serveur est npm, le gestionnaire de paquets de node.js. Voici la méthode :

$ npm install -g less

Utilisation en ligne de commande :

Après l'installation de Less, vous appelez le compilateur Less en ligne de commande, comme ceci :

$ lessc styles.less

Cette commande affiche le CSS compilé dansstdout. Vous pouvez rediriger la sortie vers un fichier :

$ lessc styles.less > styles.css

Pour obtenir un CSS minifié, ajoutez simplement l'option-x . Pour un meilleur taux de compression, vous pouvez aussi utiliser --clean-cssActivez l'option Clean CSS pour la compression.

Exécutez lessc sans aucun argument pour afficher la liste de toutes les options disponibles dans la ligne de commande.

Utilisation dans le code

Vous pouvez appeler le compilateur Less dans le code (plateforme Node) comme suit.

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

Le résultat est :

.class {
  width: 2;
}

Vous pouvez aussi appeler manuellement l'analyseur (parser) et le compilateur :

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

Configuration

Vous pouvez passer plusieurs arguments au compilateur :

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

Outils tiers

Consultez la section Utilisation pour les détails sur les outils tiers.

Ligne de commande Rhino

Chaque version publiée de less.js inclut aussi une version compatible rhino.

La version rhino en ligne de commande nécessite les deux fichiers suivants :

• less-rhino- .js - exécution de la compilation,
• lessc-rhino- .js - support de la ligne de commande

Exécutez la compilation en ligne de commande :

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

Cette commande compile le fichier styles.less et l'enregistre sous le nom styles.css. L'argument du fichier de sortie est optionnel. Sans cet argument, less écrit par défaut sur la sortie standard (stdout）。

Utilisation côté client

Exécuter less.js dans le navigateur facilite le développement, mais déconseillé en production.

Utiliser Less.js côté client est la méthode la plus directe et pratique en phase de développement. En production, les performances et la fiabilité comptent. Nous recommandons de précompiler avec node.js ou un autre outil tiers.

Commencez par ajouter dans la page.less le lien de la feuille de style, et définissez l'attribut rel à "stylesheet/less" :

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Ensuite, téléchargez less.js et incluez-le avec la balise<script></script> , en le plaçant dans l'élément<head> de la page :

<script src="less.js" type="text/javascript"></script>

Astuce

• Assurez-vous de charger votre feuille de style avant less.js.
• Si vous chargez plusieurs.less feuilles de style, chaque fichier est compilé séparément. Les variables, mixins ou espaces de noms définis dans un fichier sont donc inaccessibles depuis les autres fichiers.

Options du navigateur

Définissez l'objet global<script src="less.js"></script> avant less pour configurer les paramètres de Less.js :

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Pour en savoir plus, consultez Options du navigateur.

Téléchargement navigateur

bower install less

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

Less.js est publié sous licence Apache 2 (nous prévoyons une double licence à l'avenir). Copyright 2009-2014, Alexis Sellier et l'équipe principale de Less (voir ci-dessus). Résumé :

Les informations complètes de licence de Less.js se trouvent dans le dépôt du projet. Consultez-les.