LESS CSS
Définition
LESS est un pré-processeur CSS qui permet de personnaliser la feuille de style et 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 de CSS afin qu'il sera 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 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é écrit 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 maintient le code de façon modulaire ce qui est très important en le rendant lisible et facilement modifiable.
Exemple de couleur
Code CSS standard
#header{ color: #FFFF00; }
..
h2 { color: #FFFF00; }
Code LESS
@color: #FFFF00;
#header { color: @color; }
h2 { color: @color; }
Installation de LESS sur le serveur
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.
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, il 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, il suffit de:
- Enregistrer ci-dessus code html dans le fichier hello.html.
- Ouvrez 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 (:).
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;
}
.post a {
color: yellow;
.bordered;
}
après compilation:
code css
.bordered {
border-top: dotted 2px purple;
border-bottom: solid 3px white;
}
.post a {
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;
}
Ressources
Liens
Aya BENMOSBAH le 04 aout 2016 à 13:53 (CET), last modified le 04 aout 2016