Page 3: Fonctionnalités du langage LESS

^{Toutes les pages}

LESS: un préprocesseur CSS pour rendre vos styles dynamiques

Page 1
Une nouvelle façon de penser son CSS

Page 2
Installation de LESS

Page 3
Fonctionnalités du langage LESS

Le commentaire

Le commentaire en LESS est semblable à celui que l'on trouve dans le langage C:

Commentaire de fin de ligne: on utilise un double-slash (//) pour commenter une ligne entière.
Bloc de commentaire: on entoure le commentaire par /* et */. Le commentaire peut dans ce cas occuper plusieurs lignes.

Exemple:

// Commentaire de fin de ligne
/* Commentaire
sur plusieurs
lignes
*/

Il est toujours conseillé de commenter soigneusement son code pour que ses différentes parties soient facilement repérables lors d'une prochaine modification.

Les variables

Les variables constituent l'élément de base de tout langage de programmation. En LESS, les variables servent à stocker les valeurs CSS pour les réutiliser ensuite.

Une variable LESS est préfixée par une arobase (@) et on peut lui affecter comme valeur toutes les propriétés CSS connues.

On va reprendre une partie de l'exemple que j'ai donné au début de ce cours, mais cette fois-ci avec des variables:

@rougeFonce:#A12520;
@grisClair:#F8F8F8;

header>div:nth-child(1){
   color: @rougeFonce;
   background-color: @grisClair;
   border:solid 1px @rougeFonce;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
}

Vous avez certainement remarqué que plus besoin de faire le tour de toutes les couleurs pour les modifier lors d'une prochaine mise à jour. Il suffit de changer la valeur de la variable et le tour est joué.

Après la compilation du code ci-dessus on obtient le CSS suivant:

header>div:nth-child(1){
   color:#A12520;
   background-color:#F8F8F8;
   border:solid 1px #A12520;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
}

Les opéations

LESS prend en charge les opérateurs arithmétiques pour effectuer des opérations sur les valeurs (numériques) dont CSS dispose. Ces opérateurs sont l'addition (+), la soustraction (-), la multiplication (*) et la division (/).

Exemple:

@marge1:10px;
@marge2:15px;

@couleur1:#F00;
@couleur2:#200;

#citation{
margin: @marge1 + @marge2;
background-color: @couleur1 - @couleur2;
}

Après compilation on obtient le CSS suivant:

#citation{
margin: 25px;
background-color:#D00;
}

Nesting: Imbrication des règles

Le nesting est une méthode très pratique pour éviter les longs sélecteurs. Elle s'inspire tout simplement de la présentation des éléments en HTML (imbrication parent enfant...) ce qui donne naissance à un code claire et facilement maintenable.

Exemple:

section{
   aside{
      a{
         color:#A00;
         text-decoration:none;
      }
   }
}

En CSS on obtient:

section aside a {
color: #A00;
text-decoration: none;
}

Imaginez maintenant que l'on souhaite attribuer un style au lien survole (a:hover) alors le code précédent devient:

section{
   aside{
      a{
         color:#A00;
         text-decoration:none;
         &:hover{
            text-decoration:underline;
         }
      }
   }
}

Le code CSS qui en résulte après compilation est:

section aside a {
   color: #A00;
   text-decoration: none;
}
section aside a:hover {
   text-decoration: underline;
}

Vous avez encore probablement remarqué le caractère & avant la pseudo-classe :hover, elle sert tout simplement à rappeler l'élément courant, dans ce cas l'élément a.

Il est vrai que les exemples LESS que j'ai cités ci-dessus on l'air plus gros que le CSS qui en résulte. C'est normal car ce sont juste des exemples d'utilisation pour apprendre à se servir de LESS, mais dans un vrai projet l'utilité de ce langage sera mieux perçue ;)

Mixin

Le Mixin est l'une des méthodes les plus pratiques du LESS, on peut assimiler son comportement à celles des fonctions dans un langage de programmation. Elle sert alors à éviter les redondances et avoir ainsi un code concis et clair.

Le principe du Mixin est simple, il suffit de créer une classe en CSS et lui attribuer les styles souhaités. Vous n'êtes pas obligé de créer un élément HTML auquel vous associez cette classe car l'objectif du Mixin c'est la réutilisation de la classe définie pour agrémenter le style d'autres éléments.

Exemple:

.borderRadius{
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
}

#citation{
   margin:10px;
   .borderRadius;
}

Après compilation on obtient le code CSS suivant:

.borderRadius {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}
#citation {
   margin: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

Le fait d'appeler la classe .borderRadius dans l'élément #citation applique tout son style dans celui-ci. Cela rappelle l'utilisation des fonctions dans un langage de programmation. Désormais, à chaque fois que vous aurez besoin d'un border-radius, inutile de se soucier de la compatibilité et réécrire tous les styles possibles avec ou sans les préfixes-vendeur. Un simple Mixin suffit.

Vous me diriez peut être que ce .borderRadius applique toujours une bordure arrondie de 10px, mais si on souhaite une valeur différente comment faire? Là encore c'est comme pour les fonctions, il suffit de passer des arguments à votre Mixin.

Exemple:

.borderRadius(@val){
   -webkit-border-radius:@val;
   -moz-border-radius:@val;
   border-radius:@val;
}

#citation{
   margin:10px;
   .borderRadius(20px);
}

Après compilation on obtient le CSS suivant:

#citation {
   margin: 10px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

Vous avez remarqué qu'un simple passage d'argument à notre Mixin peut rendre notre code plus flexible et réutilisable à l'infini.

Exemple

Reprenons maintenant l'exemple que nous avons vu au début de ce cours et réécrivons le en LESS:

@rougeFonce:#A12520;
@grisClair:#F8F8F8;

.borderRadius(@val){
   -webkit-border-radius: @val;
   -moz-border-radius: @val;
   border-radius: @val;
}

header{
   div:nth-child(1){
      color: @rougeFonce;
      background-color: @grisClair;
      border:solid 1px @rougeFonce;
      .borderRadius(10px);
      input[type="button"]{
         color: @grisClair;
          display:block;
          width:auto;
          text-align:center;
          background-color: @rougeFonce;
          .borderRadius(4px);
          cursor:pointer;
       }
   }
}

Après compilation on obtient le code CSS suivant:

header div:nth-child(1) {
   color: #a12520;
   background-color: #f8f8f8;
   border: solid 1px #a12520;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}
header div:nth-child(1) input[type="button"] {
   color: #f8f8f8;
   display: block;
   width: auto;
   text-align: center;
   background-color: #a12520;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   cursor: pointer;
}

Conclusion

Durant ce mini-cours nous avons vu les bases du Pré-processeur CSS: le langage LESS. Certes, il reste encore beaucoup à voir et si vous voulez percer tous les mystères de ce langage simple vous pouvez vous rendre sur son site officiel au lien suivant http://lesscss.org/features/.

Sachez qu'il existe un rival très sérieux pour LESS, il s'agit de SASS (Syntactically Awesome Style Sheets) qu'un grand nombre d'intégrateurs et développeurs front-end préfèrent au LESS. Ses fondements son en quelque sorte proches de ceux de LESS mais apporte de nouvelles fonctionnalités intéressantes. SASS fera l'objet de notre prochain cours.

Page 1
Une nouvelle façon de penser son CSS

Page 2
Installation de LESS

Page 3
Fonctionnalités du langage LESS