LESS CSS

Définition

LESS est un pré-processeur CSS qui permet de personnaliser la feuille de style et de la réutiliser pour le site web.

C'est un langage de script qui compile le fichier CSS en respectant la syntaxe régulière du CSS afin qu'il puisse etre lu par le navigateur Web.

Ce langage fournit des fonctionnalités comme des variables, des mixins, des fonctions et des opérations qui vous permet de construire un fichier CSS dynamique.

Historique

LESS est un langage conçu par Alexis Sellier en 2009 influencé par Sass et a influencé "SCSS" (la syntaxe plus récente de Sass).

Ce langage est implémenté en open source. La première version de LESS a été écrite en Ruby et dans les versions ultérieures, il est remplacé par JavaScript.

Pourquoi LESS?

Malgré les évolutions de CSS, les programmeurs réclamaient toujours des problèmes au niveau de notion de variables et ou constantes.

LESS vient avec la solution et améliore la syntaxe de CSS pour satisfaire les programmeurs. Ili étend les capacités de description de feuille de styles CSS.

Ce nouveau langage conçu en Javascript, il est aussi créé pour être utilisé en live.

Il permet une compilation plus rapide, comparé à d’autres pré-processeurs CSS. Aussi, LESS dispose d’un atout majeur, en ce sens qu’il permet de garder le code de façon modulaire, ce qui en facilite la lecture

et la modification. En fin, une maintenance plus rapide peut être disponible en recourant à d’autres variables de LESS.

Exemple de couleur

Code CSS standard

#header{ color: #FFFF00; }
..
h1 {  color: #FFFF00; }

Code LESS

@color: #FFFF00;
#header { color: @color; }
h1 {  color: @color; }

Caractéristiques

Les codes CSS les plus facilement lisibles peuvent être présentés d’une façon organisée.

Nous pouvons aussi en définir les options de stype et les rendre ainsi plus facilement utilisables dans le code.

LESS est basé sur JavaScript et est considéré comme un super-ensemble de CSS.

LESS est un outil agile qui permet de trier les problèmes de redondance de code.

Installation de LESS

Vous devez tout d’abord avoir le node.js installer sur votre ordinateur pour exécuter les exemples LESS.

Ensuite, vous exécutez le programme d'installation pour installer les Node.js sur votre système.

Puis,vous installez LESS sur le serveur via npm (Node de gestionnaire de paquets).

Exécutez la commande suivante dans Le terminal.

npm installer -g less

Enfin, vous verrez les lignes suivantes sur Le terminal.

-- less@2.4.1
 +-- errno@0.1.4
 | `-- prr@0.0.0
 +-- graceful-fs@4.1.3
 +-- image-size@0.4.0
 +-- mime@1.3.4
 +-- mkdirp@0.5.1
 | `-- minimist@0.0.8
 +-- promise@7.1.1
 | `-- asap@2.0.3
 +-- request@2.69.0
 | +-- aws-sign2@0.6.0
 | +-- aws4@1.3.2
 | | `-- lru-cache@4.0.0
 | |   +-- pseudomap@1.0.2
 | |   `-- yallist@2.0.0
 | +-- bl@1.0.3
 | | `-- readable-stream@2.0.6
 | |   +-- core-util-is@1.0.2
 | |   +-- inherits@2.0.1
 | |   +-- isarray@1.0.0
 | |   +-- process-nextick-args@1.0.6
 | |   +-- string_decoder@0.10.31
 | |   `-- util-deprecate@1.0.2
 | +-- caseless@0.11.0
 | +-- combined-stream@1.0.5
 | | `-- delayed-stream@1.0.0
 | +-- extend@3.0.0
 | +-- forever-agent@0.6.1
 | +-- form-data@1.0.0-rc4
 | | `-- async@1.5.2
 | +-- har-validator@2.0.6
 | | +-- chalk@1.1.1
 | | | +-- ansi-styles@2.2.0
 | | | | `-- color-convert@1.0.0
 | | | +-- escape-string-regexp@1.0.5
 | | | +-- has-ansi@2.0.0
 | | | | `-- ansi-regex@2.0.0
 | | | +-- strip-ansi@3.0.1
 | | | `-- supports-color@2.0.0
 | | +-- commander@2.9.0
 | | | `-- graceful-readlink@1.0.1
 | | +-- is-my-json-valid@2.13.1
 | | | +-- generate-function@2.0.0
 | | | +-- generate-object-property@1.2.0
 | | | | `-- is-property@1.0.2
 | | | +-- jsonpointer@2.0.0
 | | | `-- xtend@4.0.1
 | | `-- pinkie-promise@2.0.0
 | |   `-- pinkie@2.0.4
 | +-- hawk@3.1.3
 | | +-- boom@2.10.1
 | | +-- cryptiles@2.0.5
 | | +-- hoek@2.16.3
 | | `-- sntp@1.0.9
 | +-- http-signature@1.1.1
 | | +-- assert-plus@0.2.0
 | | +-- jsprim@1.2.2
 | | | +-- extsprintf@1.0.2
 | | | +-- json-schema@0.2.2
 | | | `-- verror@1.3.6
 | | `-- sshpk@1.7.4
 | |   +-- asn1@0.2.3
 | |   +-- dashdash@1.13.0
 | |   | `-- assert-plus@1.0.0
 | |   +-- ecc-jsbn@0.1.1
 | |   +-- jodid25519@1.0.2
 | |   +-- jsbn@0.1.0
 | |   `-- tweetnacl@0.14.1
 | +-- is-typedarray@1.0.0
 | +-- isstream@0.1.2
 | +-- json-stringify-safe@5.0.1
 | +-- mime-types@2.1.10
 | | `-- mime-db@1.22.0
 | +-- node-uuid@1.4.7
 | +-- oauth-sign@0.8.1
 | +-- qs@6.0.2
 | +-- stringstream@0.0.5
 | +-- tough-cookie@2.2.2
 | `-- tunnel-agent@0.4.2
 `-- source-map@0.5.3

Et comme ça, vous avez bien installé votre paquet LESS sur votre machine.

Exemple LESS

Hello.html

<!doctype html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<h1>Bonjour le monde</h1>
	<h2>Bonjour la Suisse</h2>
</body>
</html>

Ensuite, nous allons créer un fichier style.less qui est assez similaire à CSS, la seule différence est qu'il sera sauvegardé avec l'extension .less.

Aussi, il est essentiel que les deux fichiers, .html et .less devraient être créés dans le meme dossier de node.js.

Hello.less

@primarycolor: #1BFF17;
@color:#1BFF17;
h1{
color: @primarycolor;
}
h2{
color: @color;
}

Maintenant, revenez au terminal et tapez la commande suivante pour compiler le fichier hello.less en hello.css

lessc hello.less hello.css

Lorsque vous exécutez la commande ci-dessus, elle crée automatiquement le fichier hello.css.

Chaque fois que vous modifiez le fichier LESS, il est nécessaire d'exécuter la commande ci-dessus dans le cmd puis le fichier hello.css sera mise à jour.

Le fichier hello.css aura le code suivant lorsque vous exécutez la commande ci-dessus:

Hello.css

h1 {
  color: #1BFF17;
}
h2 {
  color: #1BFF17;

Et pour finir et voir le résultat du code, vous devez suivre les étapes suivantes:

• Enregistrer ci-dessus le code html dans le fichier hello.html.
• Ouvrir ce fichier HTML dans un navigateur pour afficher les messages "Bonjour le monde" et "Bonjour la Suisse"en couleur vert acide.

Variables

LESS permet à définir les variables avec le symbole @.

L'Affectation d'une variable se fait avec deux points (:).

Exemple

code less

@color: #000000;

#header {
  color: @color;
}
h1 {
  color: @color;
}

code css

#header {
  color: #000000;
}
h1 {
  color: #000000;
}

Mixins

Mixins sont similaires aux fonctions des langages de programmation. Ils permettent d'obtenir un code court que le CSS puisque' ils évitent les répétitions dans le code.

Ils sont un groupe de propriétés CSS qui vous permet d'utiliser les propriétés d'une classe dans une autre classe et comprend le nom de classe dans les propriétés.

Avec LESS, on peut déclarer mixin de la même manière que le style CSS en utilisant simplement la classe ou le sélecteur de id.

Il peut stocker des valeurs multiples et peut être réutilisé dans le code à chaque fois.

Exemple

code less

.bordered {
border-top: dotted 2px purple;
border-bottom: solid 3px white;
}
.link {
color: yellow;
.bordered;
}

après compilation:

code css

.bordered {
border-top: dotted 2px purple;
border-bottom: solid 3px white;
}
.link {
color: yellow;
border-top: dotted 2px purple;
border-bottom: solid 3px white;
}

Opérations

LESS permettent certaines opérations arithmétiques telles que plus (+), moins (-), multiplication (*) et de la division (/),

et ils peuvent fonctionner sur un nombre de couleurs ou de variables.

L'utilisation des Opérations permettent de gagner beaucoup de temps.

Exemple

code less

#header {
color: @base-color + #003300;
}
#footer {
color: @light-blue;
}

Après compilation:

code css

#header {
color: #114411;
}
#footer {
color: #CEECF5;
}

Avantages

LESS génère facilement des fichiers CSS fonctionnels sur les navigateurs. Grâce à la possiblité de modification qu’il offre, il permet d’écrire un code plus clair et bien structuré.

Aussi, en recourant aux variables LESS, on accède à une maintenance facile. Grâce à la possibilité de référenciation en un ensemble de règles,

LESS permet une recyclage facile de classes entières. Enfin, LESS fournit l'utilisation d’opérations qui rendent dle codage plus rapide et qui permettent gagner du temps.

Désavantages

Les novices en CSS prétraitement doivent faire preuve de patience avant de se familiariser avec son environnement.

Il y a un couplage étroit entre les modules, ce qui requiert plusieurs efforts pour la réutilisation et / ou le test des modules dépendantes.

LESS dispose ainsi d’un cadre restreint à l’instar de l’ancien (SASS). Ce dernier est composé des cadres suivants : Compass, Gravity et Susy.

Ressources

Wikipédia_LESS

wikipédia Less variables

wikipédia less mixins

wikipédia less fonctions et opérations

Less tutorial

Less mixins tutorial

Less variables tutorial

Less operations tutorial

site officiel LESS

Liens

Livre tutoriel LESS

Aya BENMOSBAH le 04 septembre 2016 à 13:53 (CET), last modified le 05 septembre 2016