Voici 3 implémentations less assez peu utilisées d’après ce que j’ai l’occasion de voir. Elles apportent pourtant clarté de code, simplifient la factorisation et améliorent les performances du code css généré (moins de code généré, donc moins lourd).

Comme en css, @import permet d’importer/include un autre fichier less. Mais il y a à ça quelques options bien pratiques :

Import: option « less »

@import (less) 'myfile.css';

L’option « less » vous permet de forcer l’interpretation de l’import comme si le fichier distant était en less, même s’il est en css. L’intérêt ? Au lieu de conserver l’import css standard occasionnant une requête http en plus et vous forçant à rendre le fichier css disponible au navigateur, le code du fichier importé sera inclus directement dans votre fichier css final généré à partir de votre less. Bref, gros gain en perspective.

Import: option « css »

@import (css) 'myfile.less';

A l’inverse de l’option « less » précédente, vous pouvez forcer l’interprétation de votre import en css. L’intérêt est très faible, et à vrai dire, je n’ai jamais rencontré de cas où j’y gagnait quoi que ce soit à le mettre en oeuvre.

Import: option « reference »

@import (reference) 'myfile.less';

L’option reference est très rarement utilisée à grand tort. Elle permet d’importer un fichier less, mais à la génération finale en css, ses classes ne seront pas compilées en css. Vous pouvez ainsi importer un fichier et n’en utiliser qu’une partie, l’étendre, ou vous en servir de base. Petit exemple :

Fichier « thing.less »

.first-class{
text-decoration: underline;
};
.second-class{
border:1px solid red;
};

Fichier « final.less »

@import (reference) 'thing.less';
.final-class{
.first-class;
color:red;
};

La compilation de votre fichier final.less en css ne comportera QUE la classe .final-class