background preloader

Des CSS dynamiques grâce au langage LESS

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 ? C'est devenu possible grâce au langage LESS, aux frameworks Sass et xCSS. Cet article concernera uniquement le langage LESS et le compilateur LessPHP. Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet une compilation de votre fichier .less avec Javascript, tandis qu'avec LessPHP la compilation se fera côté serveur avec PHP. Installation Vous devez obligatoirement travailler dans un environnement PHP. 1. 3. Vous pouvez maintenant commencer à travailler sur le fichier input.less, PHP fera le reste. Variables Stocker des variables est très pratique pour réutiliser une même valeur plusieurs fois et éviter les répétitions. @val : 15px; margin-left: @val; Vous pouvez faire des opérations (additions, soustractions, divisions et multiplications). Mixins Un autre exemple : Héritage Pseudo-classes

LESS (langage) Pour les articles homonymes, voir Less. Less est diffusé en open source. Sa première version a été écrite en Ruby, les versions ultérieures en JavaScript. Par rapport aux autres préprocesseurs CSS, il présente la particularité de pouvoir être converti à la volée, soit par le serveur, soit par le navigateur. Il peut également être traduit automatiquement en CSS classique à l'écriture. 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. CSS supporte l'imbrication, mais les blocs eux-mêmes ne peuvent pas être imbriqués. Less propose les opérations et fonctions. Less autorise également l'utilisation d'expressions JavaScript. Less est inspiré par Sass[4].

Revue : Prepros - Geek'n'Lady Et bonjour ! Comme vous le savez maintenant, je suis une adepte de Sass. Mais qui dit Sass (ou même Less), dit compilation. Très sincèrement, ça m’embêtait de devoir à chaque fois lancer cmder et de demander à Ruby d’écouter les dossiers de mes sites et de les compiler. Au boulot, aucun problème pour compiler nos sites en Less étant donné que je suis sur un Mac avec CodeKit (oui je sais, coder sur Mac c’est le mal mais je n’ai pas vraiment le choix !) Il s’agit d’un logiciel gratuit qui possède également une version payante. Entrons dans le vif du sujet. Comment ça fonctionne ? Pour commencer, il faut importer un projet dans Prepros et procéder à quelques réglages de l’application et du projet. Sur cet exemple, je travaille sur le design du blog (non ce n’est pas un spoil :p ) qui comme vous le savez est en Sass. En activant « Sync Browsers » et en installant l’extension Prepros sur Google Chrome, Prepros rafraîchit automatiquement les pages dès l’enregistrement d’un fichier. 19 mars 2016

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

Les préprocesseurs CSS, c'est quoi ? C’est au tour des préprocesseurs de passer le test de l’ami du développeur ! 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 ? Tout bon intégrateur sait à quel point l’indentation dans un fichier CSS est importante. C’est donc posé la question d’une dynamisation du CSS. Présentation et installation d’un préprocesseur CSS : LESS J’ai décidé de vous illustrer toutes ces belles paroles par un exemple concret, l’utilisation de LESS. Rentrons dans le vif du sujet. Désormais, vous n’allez plus écrire des feuilles CSS mais des feuilles LESS. Déclaration d’un fichier LESS sur votre site : Le fichier est donc lié à votre site mais l’extension LESS n’est pas encore comprise par le navigateur. C’est ce script qui va se charger de compiler tout cela et rendre l’utilisation de LESS possible. Utilisation d’un préprocesseur : LESS Bon voilà tout est en place. 1 – Les variables

Prepros est le compagnon de vos projets SASS - Seemios Blog Prepros est un petit logiciel qui va vous faciliter la vie, surtout si vous ne supportez pas la ligne de commandes. Il permet de compiler vos fichiers SCSS ou SASS très simplement. Plus besoin d’installer Ruby et d’ouvrir votre invite de commande sur Windows. Tout est graphique et automatique après un petit paramétrage. Prepros est capable de compiler de nombreux langages tels que Less, Coffeescript, Markdown ou encore Haml. Cependant, nous allons plus particulièrement nous intéresser à la compilation des fichiers SCSS du préprocesseur SASS présenté dans un précédent billet. L’installation est très simple puisqu’il suffit de télécharger le programme d’installation sur le site officiel et de l’exécuter. Au lancement de Prepros, une fenêtre épurée vous permet d’accéder aux différents paramètres de l’application et de créer un nouveau projet. En bas à gauche de l’écran, le bouton « + » vous permet d’ajouter un projet dans Prepros. automatiquement ajouté au projet.

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

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é. 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

Digging Into Sass - A Guide A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started). In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Recommended Reading: Using Bootstrap 3 With Sass Tools Of The Trade Thoriq showed you how you can use Sass from the command line using the sass --watch command. If you prefer GUI tools, you can go with my personal favourite app, Codekit, a web developer tool for compiling Sass, concatenating, autoprefixing and much more. If you just want to try out Sass without paying for anything you can use the terminal, or Koala (here’s our review), a free cross-platform feature-rich app, which can hold its ground against premium counterparts. Variables Nesting Extending Rulesets

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

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. 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. npm install -g less lessc styles.less > styles.css Let’s say we’ve written all our stylesheet rules with LESS in styles.less. 2. 3. 4. 5. 6.

11 Mixin Libraries For Sass Designers Should Get If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. Pin it There are many mixins are made by developers, to help you when working with Sass in your development. Recommended Reading: A Simple And Easy Guide To Understand Sass 1. Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. Check out the complete documentation to use each available mixin and function. 2. Sass CSS3 Mixins provide mixins that works across different browsers. Download this mixin here. 3. Want to filter your image with stunning effect in Sass? 4. CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after and :before). 5. 6.

Comment ne pas compiler au final les mixin dans Less | Grégoire Noyelle 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. 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 Dans ce cas .traitsCommuns sera généré dans les CSS compilés Et nous aurons au final dans les CSS: Exemple de mixin avec paramètre vide Dans cet autre cas, le même mixin ne sera généré que dans les déclarations où il est utilisé. Exemple de mixins avec paramètres actifs (parameterized mixins)

Bourbon - A Lightweight Sass Tool Set 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 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.

Related: