background preloader

Less

Facebook Twitter

Less pour booster vos CSS. Introduction Depuis quelques années, de nombreux outils ont fleuri sur le web pour optimiser le temps de création de sites internet et plus particulièrement des feuilles de styles. Des frameworks au pré-processeurs de CSS, les intégrateurs ont désormais de nombreux outils auquel recourir pour minimiser leur temps de développement. Nous allons nous intéresser ici à Less, un pré-processeur qui est de plus en plus utilisé et qui est développé par Alexis Sellier. Parmi ses avantages : Il s’inspire fortement de la syntaxe CSS même pour les fonctions les plus avancées. Cas concret d’utilisation Pour une mise en route rapide avec Less, nous allons, à partir d’une base HTML simple, créer un template pour une liste de tags.

Le code HTML Nous allons en premier lieu intégrer le fichier less via une balise script. Ensuite, intégrez l’appel à la feuille de style Less. Le code HTML principal est plutôt basique. Définition des mixins et des variables Stylisation du conteneur principal Stylisation des puces. Bien démarrer avec LESS | Édition Nº5. D’un développeur à l’autre le choix du préprocesseur varie : suivant le profil et les affinités de chacun, telle solution peut sembler plus appropriée que telle autre.

Cependant, quel que soit l’outil finalement retenu, vient inévitablement ce petit moment de flottement où il faut sauter le pas et commencer à l’utiliser. Or, ce n’est pas toujours facile, faute de ressources appropriées permettant d’en appréhender correctement le fonctionnement. Cela fait maintenant plus d’un an que je travaille avec LESS. Voici une compilation de ressources qui, je l’espère, devrait vous permettre de commencer à l’utiliser sans difficulté.

Les applications LESS est un langage qui nécessite d’être compilé pour pouvoir être interprété par les navigateurs. Il existe plusieurs compilateurs disponibles dans différents langages : JavaScript, PHP ou Ruby, pour ne citer que ceux-là. Fait appréciable, il existe au moins une application pour chaque système d’exploitation : Le guide de démarrage La boîte à outils. LESS « Le langage dynamique de feuilles de style. En tant qu'extension de CSS, LESS n'est pas seulement compatible avec CSS, mais les fonctionnalités qu'il ajoute utilisent une syntaxe CSS existante. Apprendre LESS, est un jeu d'enfant, et en cas de doute vous pouvez toujours utiliser du CSS. Variables Naturellement : Résultat : Il est aussi possible de définir une variable avec le nom d'un autre : @fnord: "I am fnord. content: "I am fnord Lorsqu'une variable est définir deux fois, la dernière définition est utilisée.

Par exemple : LESS utilise l'évaluation paresseuse (lazy loading) des variables et celles-ci n'ont pas besoin d'être déclarées avant d'être utilisées. Valid less snippet: this is valid less too: both compile into: Mixins Avec LESS, il est possible d'inclure plusieurs propriétés d'un groupe dans un autre. Et nous voulons utiliser ces propriétés dans un autre groupe. Les propriétés de la classe .bordered vont donc apparaître à la fois dans #menu a et dans .post a : Mixins paramétriques On peut donc maintenant avoir simplement : Donc : et.

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. LessPHP : Générer du CSS dynamique côté serveur | Pierre Viéville. Getting started | Less.js. Ébauche de workflow Gulp : tâches courantes, unCSS, includes HTML et critical-CSS. Préambule : cet article part du principe que vous n’êtes pas totalement étranger aux notions et outils tels que LESS, NodeJS, Gulp ni à la ligne de commande, il ne s'agit d'un tutoriel de découverte de ces outils mais d'usage en environnement professionnel. Introduction Au sein de l’agence web Alsacreations.fr, nous avons instauré un processus de travail (un “workflow”) composé de langage LESS, compilé avec des tâches Gulp et saupoudré de conventions internes et de KNACSS.

Le site goetter.fr est mon site personnel, mon bac à sable et mon espace de test pour moults expériences web. La version actuelle du site est très artisanale et manuelle. Cela m’a pris une journée de reprendre tout le workflow de mon site perso. L’environnement Gulp Avec le choix de Gulp, mon processus de travail est aujourd'hui différent dans la mesure où je scinde deux environnements distincts : tous mes fichiers en développement sont dans _src/ les fichiers compilés, à envoyer en prod sont tous dans _dist/ tâches CSS. Pourquoi je n'utilise pas les préprocesseurs CSS? Pour entrer directement dans le vif du sujet: non, je ne suis pas contre les préprocesseurs. D'ailleurs j'utilise PHP (HyperText Preprocessor) pour générer des sites web dynamiques. C'est même indispensable. En revanche, je ne travaille pas avec les préprocesseurs CSS parce que je n'en ai pas besoin.

Je pense d'ailleurs que très peu de personnes en ont réellement besoin. Ils complexifient CSSIls n'ajoutent pas de fonctionnalités CSS aux CSSIls ne font pas (toujours) gagner de tempsIls peuvent être dangereux pour le standard CSS (et provoquer une confusion) Pour faire court, je ne remets pas en cause le besoin, ni la logique de développement qui découle de l'utilisation des préprocesseurs CSS, mais cette automatisation est-elle efficace/utile pour tous? Ils complexifient CSS Je sais qu'en lisant ce titre, certains d'entre vous fulminent! J'ai bien employé ici le verbe «complexifier» et non le verbe «compliquer». Exemple de syntaxe Sass pour des coins arrondis Equivalent CSS $variable: 8px; Préprocesseurs CSS : renoncer par choix, ou par ignorance ? - Ministry of Interface Development. Les préprocesseurs CSS génèrent un grand buzz en ce moment, mais sont-ils vraiment compris ? 46% des 12712 intégrateurs ayant répondu à une récente étude n'y auraient jamais touché, et 7% n'apprécient simplement pas les préprocesseurs.

Certains supposent que LESS, Sass et Stylus sont mauvais pour la qualité du code sans même les avoir essayé, d'autres jettent l'éponge par “peur de la ligne de commande” ou parce qu'ils ne veulent pas avoir à “apprendre un nouveau langage”. Dans les nombreux commentaires du billet de Chris Coyer sur css-tricks.com opposant Sass et LESS dans un match sans merci, j'ai noté beaucoup d'incompréhension et de présupposés incorrects. Pour moi, la vraie question n'est pas de devoir choisir entre LESS, Stylus ou Sass, mais bien d'utiliser ou non un préprocesseur sur un projet donné. Une petite nuance toutefois : renoncerez-vous aux préprocesseurs par choix, ou bien par ignorance ? Tl;dr Vous hésitez toujours ? Pourquoi utiliser un préprocesseur CSS ? Sass Reference. Syntax There are two syntaxes available for Sass.

The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS.

Either syntax can import files written in the other. . $ sass-convert style.sass style.scss $ sass-convert style.scss style.sass Note that this command does not generate CSS files. Using Sass Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. Gem install sass sass input.scss output.css :style. Sass Reference. Syntax There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. This syntax is enhanced with the Sass features described below. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS.

Either syntax can import files written in the other. . $ sass-convert style.sass style.scss $ sass-convert style.scss style.sass Note that this command does not generate CSS files. Using Sass Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. Gem install sass If you’re using Windows, you may need to install Ruby first. config.gem "sass" Maps. 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. Une grille responsive avec CSS3 Flexbox et LESS (ou Sass) Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout.

En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable. Le tout en un minimum de code et un maximum de propreté HTML. Voir le résultat final en ligne Le fondement : Flexbox Layout Les bases de la grille .container-grid-4 { }.container-grid-4 > * { } Ébauche de grille en flexbox Gérer la gouttière Bonus : “à la Une” Les idées reçues sur les préprocesseurs CSS (Sass, Less...) Damian Le Nouaille est développeur Freelance (Frontend et Ruby).

Actuellement, il travaille sur Mayathebuzz et essaie d’utiliser les meilleures pratiques frontend pour rendre son métier plus agréable. Il propose également une formation Sass et Compass pour Human Coders Formations. Vous pouvez le suivre sur Twitter (@damln) et en savoir plus sur son site Avant tout, qu’est-ce qu’un préprocesseur CSS ? C’est un outil permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide. “Ils complexifient CSS.” Ajouter des “mots clés” comme @include border-radius(5px); et autres fonctions de Sass n’est pas une destructuration de CSS, ni une complexification, c’est simplement un niveau d’abstraction qui vous permet de vous décharger de responsabilités inutiles à ce stade de votre code.

Nos projets se complexifient, s’agrandissent, intègrent du JavaScript, des modules et autres briques que nous, développeurs, devons comprendre. CSS doit-il faire ça ? Working with CSS Preprocessors. Sass_and_less_compared.markdown. Sass/Less Comparison In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax. For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different. Variables Both languages support scoped variable definition within a selector context. However they differ in their behavior: And their different output: Nested Selectors Sass and Less have the & selector that allows nested selector to refer to the parent scope. Mixins Mixins with Arguments / Dynamic Mixins Selector Inheritance Less does not provide selector inheritance. Colors Both less and sass provide color math.

Sass provides a full array of tools for manipulating colors. Sass exposes a long list of color functions not found in CSS: Accessors: red($color)green($color)blue($color)hue($color)saturation($color)lightness($color)alpha($color) Mutators: Numbers Sass: Less: Some sass examples: