A la découverte de LESS

less-logo

LESS est un langage de définition de style, du type CSS, mais étoffé de quelques fonctionnalités supplémentaires comme la définition de variables, expressions et fonctions pour un code plus structuré et plus facile a maintenir, et oui c’est possible !

Les variables :
Vous pouvez donc définir des variables pour aider a maintenir l’homogénéité de vos styles.

@bordercolor : #58D3F7; 
@containerpadding : 12px 28px 12px 28px;
section{
 padding: @containerpadding;
 }

Pratique pour harmoniser vos composants ! Mais ce n’est pas tout…

Les fonctions et expressions :
Il est donc très facile de réutiliser nos variables pour définir d’autres variables, dans des expressions et même de petites fonctions 🙂

 @bordercolor : red;
 @containerborder: @bordercolor 1px dashed; /*define other variable*/
 @border : 6px;
section {
 padding: @containerpadding;
 border : @containerborder;
 margin-bottom: (@border*2); /*expression*/
 color: lighten(@bordercolor, 20%); /*function*/
 b{
 color: @bordercolor; /*les balises b se trouvant dans section*/
 }
 }

Les Mixins:
Il est également possible de créer des mixins avec LESS afin d’éviter la répétion de nombreuse lignes de code ! Vous n’avez jamais entendu parler des mixins ? Plus d’infos ici.
A la compilation, le mixin sera copié en remplaçant les variables pas les valeurs définies.

/*le mixin*/
.shadow(@spread, @colorShadow) {
-moz-box-shadow: 0px 0px @spread @colorShadow; 
-webkit-box-shadow: 0px 0px @spread @colorShadow;  
box-shadow: 0px 0px @spread @colorShadow; 
}
/*utilisation*/
 section {
 padding: @containerpadding;
 border : @containerborder;
 color: lighten(@bordercolor, 20%);
 margin-bottom: (@border*2);
 .shadow(12px, red); /*l’appel au mixin*/
 b{
 color: @bordercolor;
 }
 }

crunch-less-logo

Voilà, j’ai donc utiliser le petit logiciel AIR “Crunch!” de Matt & Matt que je vous encourage a tester 🙂

 

Informations complémentaires :
Le site officiel : http://lesscss.org/
Outil de compilation et IDE gratuit et sympa d’utilisation : http://crunchapp.net/

2 réflexions au sujet de « A la découverte de LESS »

  1. Ping : Bootstrap, le design web facilité ! | Blog développeuse - Hamon

  2. Ping : Comment s’organise un projet Laravel 5 ? | Blog développeuse - Hamon

Laisser un commentaire