background preloader

LESS

Facebook Twitter

Learn LESS in 10 Minutes (or Less) Danny Markov We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code.

Learn LESS in 10 Minutes (or Less)

You end up duplicating the same rules all over the place and using your editor’s search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn’t have to be this way. Luckily, the web development community has solved this problem. Variables, so that you can define and easily change values throughout your stylesheet.

The negative aspect is that if you use one of these pre-processors, you will need to compile your stylesheets down to regular CSS so that it works in browsers. 1. Less is written in JavaScript, and needs either Node.js or a web browser to run. If you have node installed, and you know what a terminal is, go ahead and open one. Getting Started with Less. Utilisation optimisée de Framework CSS comme Bootstrap avec Less. J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité.

Utilisation optimisée de Framework CSS comme Bootstrap avec Less

J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework. Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design.

Les approches HTML-driven et CSS-driven pour habiller une page Web La différence est simple : HTML-driven où l'habillage rapide et désolant Il vous faudra : Sources. Les préprocesseurs CSS, c'est quoi ? C’est au tour des préprocesseurs de passer le test de l’ami du développeur !

Les préprocesseurs CSS, c'est quoi ?

Je vais vous expliquer un peu le concept et ensuite vous présenter LESS un des préprocesseurs les plus connus ! Les préprocesseurs CSS, pourquoi ne pas y avoir pensé auparavant ? LESS (langage) Un article de Wikipédia, l'encyclopédie libre.

LESS (langage)

Pour les articles homonymes, voir Less. LESS est implémenté en open source. Sa première version a été écrite en Ruby. Dans les versions ultérieures, Ruby a été remplacé par JavaScript. Une particularité de LESS par rapport aux autres préprocesseurs CSS est qu'il peut être compilé à la volée, soit lors du rendu par le navigateur, soit côté serveur. Lors de la compilation, les valeurs des variables sont substituées dans le document CSS. La compilation du code LESS ci-dessus donne le code CSS suivant : Les mixins permettent d'embarquer des propriétés d'une classe dans une autre classe en incluant le nom de la classe dans les propriétés.

LESS dispose également de blocs de règle particuliers qui sont des mixins acceptant des arguments et se comportant comme des fonctions. Des CSS dynamiques grâce au langage LESS. Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ?

Des CSS dynamiques grâce au langage LESS

LiveStyle Analyzer. Comment ne pas compiler au final les mixin dans Less. Récemment, après avoir beaucoup utilisé les mixins avec Less, j’ai constaté après coup que ces mêmes mixins étaient également générés dans la feuille de style compilée.

Comment ne pas compiler au final les mixin dans Less

Cela provoquait dans mon cas une duplication du code. Mixin dans les CSS compilé Pour ne pas avoir les mixins dans les CSS compilés par Less, il s’agit juste d’ajouter () après le nom du mixin (si celui-ci n’a pas de paramètres). Sinon, comme nous le verrons, ce n’est pas nécessaire. Cet article: How to use Mixins in LESS, a CSS Preprocessor décrit bien le processus global des mixins. Finalement, le mixin doit être vu comme un ensemble de règles CSS qui peut être intégré dans d’autres déclarations. Exemple de mixin simple. Getting started. LESS. La principale lacune de CSS est… sa simplicité : à trop vouloir en faire un langage intuitif et facile à interpréter, il en devient répétitif, fastidieux et parfois réducteur.

LESS

Less est ce que l'on appelle un "Préprocesseur CSS", basé sur le langage JavaScript et peut s’apparenter à une extension du langage CSS dans le but de lui apporter les fonctionnalités qui lui manquent parfois cruellement, telles que la notion de variables, les opérations de calculs dynamiques, la factorisation de parties de code ou encore les imbrications de sélecteurs. Dans sa version de base, le code Less génère des fichiers CSS après avoir été interprété et compilé via un serveur en Ruby, mais il existe une version exploitable via PHP ( Il s’agit d’un projet jeune issu de groupes de travail de développeurs, c’est pourquoi il demeure encore quelque peu ardu à mettre en oeuvre et nécessite un minimum de connaissances en langages et administration de serveur.

LESS (langage)