{less} Guide de démarrage

Transcription

1 {less Guide de démarrage

2 Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site de référence : On privilégiera l'installation coté client pour les phases de test, pour sa facilité de mise en oeuvre, et l'installation coté serveur pour la mise en production, pour ses performances.

3 Coté serveur Sur un serveur Debian Ubuntu ( au moment de la rédaction du cours) Il faut installer nodejs, npm et node-less (apt-get install) Il faut également installer less lui même, par npm install less A partir de ce moment, en console (ssh) vous pouvez utiliser lessc pour lancer le "traitement" de vos fichiers comme suit user@serveur:~/public_html $ lessc nom-du-fichier-less > nom-du-fichier-css Annexe : se connecter en ssh, vérifier que l'on peut lancer lessc

4 Coté client Dans l'entête de votre fichier html vous aurez le lien vers le fichier less, en lieu et place du fichier css "normal" <link rel="stylesheet/less" type="text/css" href="styles.less"> Puis vous appellerez le fichier less.js que vous aurez préalablement téléchargé: <script src="less.js" type="text/javascript"></script> Ou en CDN (Content Delivery Network) <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.0.0-b2/less.min.js"></script> Attention : c'est le navigateur du client qui fait tout. Si javascript est désactivé (c'est vrai que c'est rare) ou si votre css est lourde et que l'ordinateur client est un peu fatigué. :-(

5 Mise en bouche Si vous êtes en train de suivre ce cours, il est probable que vous connaissiez déjà la conception de code html et css. Si vous êtes un tant soit peu attaché à avoir une programmation "propre", il est également probable que vous ayez déploré des "manques" dans l'écriture des css. Commençons donc directement par des exemples :

6 Des variables exo1.less : /* la palette de couleurs #d324d6; Je définis des variables pour stocker les codes hexadécimaux RVB des couleurs utilisés partout. #content aside h2 Partout en j'en ai besoin, j'utilise des variables au lieu de répéter ce code hexadécimal RVB.

7 Le résultat Après un lessc, on obtient : /* la palette de couleurs */ #content { background-color: #1377db; aside h2 { color: #d324d6; Mon commentaire est recopié tel quel Si je veux un commentaire propre à less, j'utiliserai // Par contre, il a bien substitué les variables par leurs valeurs respectives Simple, mais puissant : qui n'a jamais recherché/remplacé une chaîne dans des dizaines de fichiers?

8 Classe abstraite Pour que vos bordures soient bien arrondies, quel que soit le navigateur, vous avez lu quelque part qu'il valait mieux faire un truc du genre :.boitearrondie { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; Si le webdesigner a décidé d'arrondir tous les angles de tous les objets de toutes les pages, ça va devenir fastidieux...

9 Classe abstraite { #inscription {.border-radius(10px);.arrondi {.border-radius(4px); Je reprend la syntaxe avec les préfixes en fonction du navigateur. Je me permet même de passer le rayon de l'arrondi en argument!

10 Le résultat #inscription {.arrondi { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; lessc m'a bien généré la css telle qu'en elle même, avec toutes ces fastidieuses répétitions...

11 Imbrication <header> <h1> Du point de vue d'un programmeur lambda, le code est plus "propre" Version CSS header { background:.; width:. header h1 { color: ; Version LESS header { background:.; width:.; h1 { color: ;

12 Calcul #vignette.info La hauteur du conteneur #vignette est calculée : une hauteur arbitraire à laquelle en additionne la hauteur de l'élément inclus + les 5px;.info { #vignette { height: 200px + * 2) ;

13 Couleurs Dans cet exemple, nous utiliserons une "fonction" less de "manipulation" des couleurs <div id="bloc1">lorem ipsum</div> <div id="bloc2">dolor sit amet 40%; #bloc1 { background-color:@coul1; #bloc2 {background-color:lighten(@coul1,@coef); On définit 2 variables Cette couleur est la couleur 1 "éclaircie" de 40%

14 Un menu <nav> <ul> </ul> </nav> <li class="c1">produits</li> <li #7BB7E5; nav { background: #aaa; li { width: 200px; float: left; margin-right:10px; list-style-type:none;.c1 { background-color:@coul1; color:contrast(@coul1);.c2 { background-color:@coul2; color:contrast(@coul2); L'objectif est, sur ce simple menu, de gérer automatiquement le contraste entre la couleur du fond et celle du texte