« LESS CSS » : différence entre les versions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 137 : | Ligne 137 : | ||
Et comme ça, vous avez bien installé votre paquet LESS sur votre machine. | Et comme ça, vous avez bien installé votre paquet LESS sur votre machine. | ||
===== Exemple LESS===== | |||
'''''Hello.html''''' | '''''Hello.html''''' | ||
Version du 4 septembre 2016 à 13:45
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 avec Node.js
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.
Ressources
Liens
Aya BENMOSBAH le 04 Aout 2016 à 13:53 (CET), last modified le 04 aout 2016