Simplifiez-vous la vie avec LESS Online

OpenClassrooms

Formation

En Ligne

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Description

Typologie

Formation

Méthodologie

En ligne

Nous vous proposons des cours ouverts pour se former autrement, pour devenir acteur de votre vie. Nous vous aidons à prendre votre envol, mais ça ne s'arrête pas là. Notre volonté est de vous accompagner tout au long de votre vie, dans votre parcours professionnel.Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Tous
Aux étudiants
À l'établissement

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Le CSS est un langage déclaratif simple : la plupart du temps, on applique une valeur à une propriété. Mais de nos jours, avec le développement des attributs propriétaires (vous savez, les fameux -moz-*, -webkit-* et autres), le code se trouve dupliqué en de nombreux endroits.

En voici un exemple typique :

#foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* etc. */ }

De même, il est impossible d’imbriquer des sélecteurs en CSS :

/* Impossible d’écrire ceci : */ #foo { bar { color: #150; } baz::before { content: '['; } baz::after { content: ']'; } } /* Il vous faudra écrire ceci : */ #foo bar{ color: #150; } #foo baz::before { content: '['; } #foo baz::after { content: ']'; }

Enfin, imaginons le cas où il vous faudrait définir une palette de couleurs pour votre site. À chaque changement de couleur, vous devriez éditer vos fichiers à l'aide de la fonction « rechercher / remplacer ». Quelle perte de temps !

Des gens intelligents se sont donc penchés sur la question, et en ont retiré l’observation suivante : « Nous devrions créer un langage dynamique capable de générer des feuilles de style que les navigateurs pourraient comprendre. »

Ainsi naquit LESS.

Citation : lesscss.org

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

Citation : traduction

LESS étend le CSS avec un comportement dynamique, utilisant des variables, des classes abstraites, des opérations et des fonctions. LESS fonctionne aussi bien côté client (IE version 6 et +, Webkit [Ndt : Safari, Chrome, Midori], Firefox) que côté serveur, avec Node.js.

Il est à noter qu’il existe également des implémentations non officielles en PHP, Ruby, Python, etc.

Commençons dès à présent avec l’installation de LESS.

Installation

Les navigateurs ne reconnaissent pas LESS, ils ne connaissent que CSS. Il vous faudra donc un interpréteur, qui va transformer LESS en CSS.

Cet interpréteur est capable de s’installer de deux façons différentes :

côté client (le fichier LESS est traduit par votre visiteur) ;
côté serveur (vous envoyez directement un fichier CSS).

Il est bien entendu exclu d’installer LESS côté client et côté serveur. Vous devez choisir.

Installation côté client

C’est la méthode la plus simple à mettre en œuvre. Il s’agit d’ajouter un fichier sur votre serveur et de modifier quelque peu la balise <head> de votre HTML.
Cependant, cette technique requiert l’activation de JavaScript par le client (le visiteur de votre site). Dans le cas contraire, il n’aura devant les yeux qu’une page non stylisée. C’est la méthode que j’utilise personnellement, étant donné que le nombre de clients n’utilisant pas JavaScript se fait rare et que ceux le désactivant intentionnellement savent à quoi s’en tenir. Aussi, interdiction de se battre dans les commentaires à ce sujet.

En bref, il vous suffira de remplacer la ligne 1 par la ligne 2 :

<link rel="stylesheet" type="text/css" href="styles.css">  <link rel="stylesheet/less" type="text/css" href="styles.less">

Vous devrez télécharger la dernière version de less.js depuis le site officiel.

Enfin, vous devez rajouter dans votre HTML, après vos <link rel="stylesheet/less" />, la ligne suivante (c’est important) :

<script src="less.js" type="text/javascript"></script>

Vous pouvez maintenant passer à la pratique.

Installation côté serveur

Si vous décidez d’installer LESS côté serveur, vous pourrez permettre à vos visiteurs de visualiser votre page correctement, même s’ils ont désactivé JavaScript.
Cependant, cette installation est dépendante du serveur utilisé, et il n’existe à ce jour d’interpréteur officiel que pour le fantastique frameworkNode.js.

Deux cas de figure s’offrent maintenant à vous :

vous utilisez Node.js, et l’installation est décrite plus loin ;
vous utilisez un autre serveur, et vous souhaitez générer des fichiers CSS que vous servirez statiquement (voir plus loin) ;
vous utilisez un autre serveur, et devrez vous référer à un moteur de recherche pour l’installation. On se retrouve dans la prochaine partie pour la mise en pratique.

N.B. : si vous voulez rédiger une partie de ce tutoriel pour l’installation de LESS sur un autre logiciel que Node.js, contactez-moi.

Installation avec Node.js

Vous devez tout d’abord installer le paquet LESS, grâce à npm :

$ npm install less

Vous pourrez ensuite utiliser LESS dans votre code en important le module LESS puis en utilisant son compilateur :

var less = require('less'); less.render(style, callback);Compilation des fichiers pour les servir statiquement

Vous n’avez qu’à compiler vos fichiers .less en .css grâce à la commande suivante :

lessc style.less > style.css

Vous pourrez ensuite envoyer directement le fichier généré.

Voyons maintenant les avantages de LESS !

Utilisation

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. Aux férus de programmation, je n’ai rien à apprendre ; pour les autres, retenez simplement que les constantes seront modifiées par leur contenu à la compilation. Un exemple ? En admettant que vous utilisiez les différentes couleurs dans votre longue feuille de style (palette volée sur colorjack.com) :

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 ». Ne serait-il pas plus simple de déclarer une constante par couleur ? Avec LESS, vous le pouvez :

/* Déclaration */ @blue: #17B6FF; @magenta: #FF17B6; @lime: #B6FF17; @green: #1BFF17; /* Utilisation */ #header { background: @blue; } #footer { background: @magenta; }

LESS générera le CSS suivant :

#header { background: #17B6FF; } #footer { background: #FF17B6; }

On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés :

/* Déclaration */ @bg_header: #17B6FF; @bg_footer: #FF17B6; /* Utilisation */ #header { background: @bg_header; } #footer { background: @bg_footer; }

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. Expliquons ceci par un exemple (je me permets de reprendre l’exemple d’introduction) :

/* Définition de la classe .border-radius */ .border-radius { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } /* Utilisation de .border-radius comme d’une classe abstraite */ #foo { .border-radius; /* etc. */ } /* CSS généré : */ #foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* etc. */ }

Sur un élément, cette transformation peut paraître triviale, mais si vous devez appliquer des bordures arrondies sur 50 éléments, croyez-moi, LESS va vous servir. Cet exemple n’est cependant pas parfait : la valeur 10px est stockée en dur dans notre classe abstraite. Et si nous transmettions des paramètres à notre classe abstraite ?

/* Définition de la classe .border-radius avec un paramètre */ .border-radius(@radius) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } /* Utilisation de .border-radius comme une classe abstraite */ #foo { .border-radius(10px); /* etc. */ } /* CSS généré : */ #foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* etc. */ }

Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules.

Enfin, LESS permet aussi d’utiliser des valeurs par défaut pour les paramètres :

/* Définition de la classe .border-radius avec un paramètre optionnel */ .border-radius(@radius: 10px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } /* Utilisation de .border-radius comme une classe abstraite */ #foo { .border-radius(10px); /* – ou bien – */ .border-radius; /* etc. */ } /* CSS généré : */ #foo { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* etc. */ }

Il existe une constante dans chaque classe abstraite paramétrable, appelée @arguments, et qui contient l’intégralité des paramètres passés à la classe.

Les classes abstraites, comme les constantes, sont très puissantes et vous permettent de minimiser votre feuille de style à moindre coût, et donc de faciliter sa maintenance.

Imbrication

LESS vous autorise à simplifier votre feuille de style en imbriquant vos sélecteurs, comme vous le feriez avec vos balises HTML. Voici un exemple :

/* LESS */ #foo { background: lemon; bar { color: lightblue; } baz { color: orange; } } /* CSS généré */ #foo { background: lemon; } #foo bar { color: lightblue; } #foo baz { color: orange; }

J’imagine que vous n’avez pas besoin d’explications supplémentaires. Un détail cependant : vous pouvez utiliser le symbole & comme vous utiliseriez this dans un autre langage. Cette comparaison n’est pas très claire, voici donc un exemple :

/* LESS */ #foo { background: lightgrey; &:hover { color: orange; } } /* CSS généré */ #foo { background: lightgrey; } #foo:hover { color: orange; }Opérations

LESS est capable d’effectuer des opérations. C’est très pratique, puisque vous gagnez du temps encore une fois. Exemple :

@size_image: 100px; .box { width: @size_image + 10px; height: @size_image + 10px; img { width: @size_image; height: @size_image; } }

Dans cet exemple, nous aurions pu utiliser un margin, il est vrai. Mais vous n’êtes pas limités aux opérations sur les dimensions !

@bg_body: #555; @bg_header: @bg_body + #666; /* @bg_header vaut maintenant #BBB ! */

Vous pouvez utiliser les parenthèses pour spécifier les priorités dans des opérations complexes, et devez les utiliser quand elles sont conjointes à d’autres paramètres :

#header { width: @width - (@space * 2 + @foo); } #footer { border: (@space / 2) solid orange; }Fonctions

LESS propose pour l’instant une dizaine de fonctions pour interagir avec les couleurs. Il n’est pas possible de définir vos propres fonctions à l’heure actuelle. Ces fonctions sont les suivantes :

Fonction

Description

Exemple

lighten(@c, @x)

Éclaircit

lighten(#AAA, 42%)

darken(@c, @x)

Assombrit

darken(lightblue, 3.14%)

saturate(@c, @x)

Sature

saturate(#123456, 10%)

desaturate(@c, @x)

Désature

desaturate(#567, 50%)

fadein(@c, @x)

Rend transparent

fadein(blue, 30%)

fadeout(@c, @x)

Opacifie

fadeout(rgba(123, 213, 231, 132), 30%)

spin(@c, @x)

Change la teinte de @x degrés

spin(red, 30)

hue(@c)

Retourne la teinte

hue(#345)

saturation(@c)

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Simplifiez-vous la vie avec LESS Online

Prix sur demande

Contact

Simplifiez-vous la vie avec LESS Online

Questions / Réponses

Les Avis

Le programme

Ajoutez des cours similaires
et comparez-les pour mieux choisir.

Simplifiez-vous la vie avec LESS Online

Questions / Réponses

Les Avis

Le programme

Ajoutez des cours similaireset comparez-les pour mieux choisir.

Ajoutez des cours similaires
et comparez-les pour mieux choisir.