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.

Less pour booster vos CSS

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 : Bien démarrer avec LESS. 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.

Bien démarrer avec LESS

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

LESS « Le langage dynamique de feuilles de style

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 : Simplifiez-vous la vie avec LESS. LessPHP : Générer du CSS dynamique côté serveur. Getting started. É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.

Ébauche de workflow Gulp : tâches courantes, unCSS, includes HTML et critical-CSS

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

Pourquoi je n'utilise pas les préprocesseurs CSS?

D'ailleurs j'utilise PHP (HyperText Preprocessor) pour générer des sites web dynamiques. 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 ?

Préprocesseurs CSS : renoncer par choix, ou par ignorance ? - Ministry of Interface Development

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”. Sass Reference. Syntax There are two syntaxes available for Sass.

Sass Reference

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. Sass Reference. Syntax There are two syntaxes available for Sass.

Sass Reference

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

Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)

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. 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. Working with CSS Preprocessors. Sass_and_less_compared.markdown.