Des CSS dynamiques grâce au langage LESS

Simplifiez-vous la vie avec LESS La partie fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ? Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS pur dans votre code si vous le souhaitez. Constantes Tout d’abord, LESS vous permet d’utiliser des constantes. un bleu électrique (#17B6FF) ;un magenta pétant (#FF17B6) ;un vert citron (#B6FF17) ;un vert acide (#1BFF17). Si vous décidez de changer une des couleurs de votre palette, vous allez devoir vous battre avec votre éditeur à coups de « rechercher / remplacer ». LESS générera le CSS suivant : On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés : Vous pouvez utiliser des variables de différents types (couleurs, dimensions, pourcentages, chaînes de caractères, etc.). Classes abstraites Les classes abstraites peuvent être comparées à des fonctions. Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules. Imbrication

Optimisez vos CSS avec LESS | Washaweb Note : Ce tutoriel a été initialement publié dans le Hors Série N°15 de Webdesign Magazine. C’est avec leur aimable autorisation que je peux aujourd’hui publier cet article ici, sur mon blog. Apprenez à optimiser vos CSS en intégrant le Framework LESS. Pour ce tutoriel, vous trouverez la librairie LESS.js sur le site lesscss.org, ainsi qu’une page d’exemple ici. Introduction Lors de la réalisation d’un site HTML, on s’aperçoit que la rédaction de feuilles de styles peut vite devenir fastidieuse et répétitive. Présentation de LESS LESS peut fonctionner de différentes manières qui sont toutes détaillées sur le site (en anglais). Pour l’exemple d’intégration de ce tutoriel, nous allons partir d’un fichier HTML qui contient déjà une feuille de style selon l’exemple suivant : <! Nous déposons le fichier téléchargé less.js à la racine du site après l’avoir renommé. Activer le mode « watch » Première utilisation : les variables Opérations Héritage

LESS compiler in PHP - lessphp New: lessphp 0.4.0, compiles Bootstrap 3, breaking changes, see Changelog (August 9th 2013) About lessphp is a compiler for LESS written in PHP. The entire compiler comes in a single includable class, but an additional command line interface to the compiler is included. It will run on PHP 5.1+. For an overview of the syntax take a look at the lessphp documentation. Follow the author on twitter for updates: @moonscript. Demo Use the live demo to test the compiler using your own code, or click through the example buttons to see various parts of the language. Edit me ↴ CSS comes here, click compile to build. Quick Start The typical flow of lessphp is to create a new instance of lessc, configure it how you like, then tell it to compile something using one built in compile methods. The compile method compiles a string of LESS code to CSS. The compileFile method reads and compiles a file. echo $less->compileFile("input.less"); $less->checkedCompile("input.less", "output.css"); Documentation Plugins Issues