Tilap.net

Développement web

Less

LessCSS, pour se simplifier les CSS

Les variables dynamiques avec Less css

La venue des preprocesseurs CSS (SCSS, LESS, etc…) se démocratise, et pourtant leur utilisation courante se limite à :

  • le coté pratique des nested;
  • quelques fonctions de base (sur les couleurs);
  • le calcul de certaines propriétés (addiotion de padding, …);
  • la définition de quelques mixins.

C’est bien dommage, car le pré-processing permet bien plus. Voici un exemple de mise en oeuvre de variables à nom dynamique, très utile lorsque vous construisez des chartes graphiques cohérente et ayant des variantes par exemple.

Lire la suite »

LessCSS: mixins pour les images en retina

Avec l’émergence du retina, il devient vite fastidieux d’écrire son code css en dupliqué pour gérer les cas retina ou non.

Voici un petit helper en LessCss, qui va vous simplifier la tache.

  • Pour les écran normaux, l’image avec l’url passée sera utilisée en image de fond (background-image).
  • Pour les écran en rétina, le fichier alternatif dont le nom finira par @2x sera utilisé.

La condition de détection de hires peut évidemment s’appliquer à d’autres cas, bien que l’image de fond reste la plus courant.

LessCSS: les imports, options css, less et reference

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.

Lire la suite »

LessCSS pour la production avec node.js et npm

LessCSS est un framework simplifiant le travail au niveau CSS, en permettant l’utilisation de variables et fonctions grâce à une compilation javascript.
Très pratique, il fait gagner en lisibilité et en rapidité de développement.

Néanmoins, si pour le développement c’est un réel gain, en production ça l’est beaucoup moins : la feuille de style est interprétée en javascript à chaque affichage de page.

Je vous propose donc ici l’installation et l’utilisation d’un compilateur, permettant une fois vos développements achevés, de compiler vos fichiers less en un css unique, avec en bonus la compression pour un maximum de performances.

Lire la suite »

X