samedi 7 avril 2012

LESS : les CSS dynamiques



Les CSS sont à l'honneur depuis quelques temps grâce aux nouveautés de la version 3 toutes plus impressionantes les unes que les autres : 3D, Ombrages, Transformations, Media Queries, ...


Cependant, quand on s'intéresse à son binôme, le HTML, on note que les développeurs ont à 
leur disposition toute une panoplie de solutions pour rendre le HTML dynamique : PHP, JSP, JSF, ASP, ... et ce depuis fort longtemps !


Sans ces technologies, le développement d'application web dynamique serait très difficile.


A l'heure, ou les utilisateurs demandent toujours plus de personnalisation des interfaces, ou les sites web sont ou seront accédés par une variété incroyable de périphériques de toutes tailles comment se passer de feuilles de style dynamiques ?


LESS répond à ce besoin en proposant une extension au langage CSS.


LESS permet d'adresser facilement des problématiques comme le support de thèmes dans les applications, la factorisation des styles, ...


Ces problématiques sont importantes pour la maintenance, l'agilité des applications webs , ...


Coder en LESS consiste à écrire des CSS en ajoutant des éléments syntaxiques nouveaux.


Au final, les navigateurs ne comprennent que le langage CSS. 


Il faut inévitablement passer par une phase de transformation LESS > CSS selon deux modes :

  • dynamique : sur le navigateur de l'utilisateur
  • statique : via un compilateur LESS, puis déployées de manière standard avec l'application 


Voici quelques une de ces extensions.


Les variables



Les variables permettent de factoriser des éléments de style très communs comme les couleurs par exemple. 


@some-color: #FF34AA;

#myid { color: @some-color; }
.myclass { color: @some-color; }


La compilation donnera la CSS suivante :

#myid { color: #FF34AA; }
.myclass { color: #FF34AA; }




Les mixins



Cette extension permet d'embarquer n'importe quelle classe qui définit un ensemble de style à l'intérieur d'une autre classe.



.margined {
  margin-top: 1em;
  margin-bottom:1em;
}
#banner a {
  color: black;
  .margined;
}
ul {  
  .margined;
}



La classe cible, l'id ou l'élément reçoit alors tous les styles définis dans la classe embarquée :

#banner a {
  color: black;
  margin-top: 1em;
  margin-bottom:1em;
}

ul {  
  margin-top: 1em;
  margin-bottom:1em;
}

De plus, les mixins peuvent être paramétrés !


.margined (@height:1em){
  margin-top: @height;
  margin-bottom:@height;
}


#banner a {
  color: black;
  .margined(1.5em);
}

ul {  
  .margined;
}


Donne :


#banner a {
  color: black;
  margin-top: 1.5em;
  margin-bottom:1.5em;
}

ul {  
  margin-top: 1em;
  margin-bottom: 1em;
}

Notez la valeur par défaut de l'argument @height !

Il est aussi possible de déclarer plusieurs arguments pour un mixin un peu comme pour une fonction.

 

Opérations



Les opérations permettent d'effectuer quelques calculs simples : addition, soustraction, multiplication, division.


Un petit exemple ici :

@simple: 5%;
@double: @simple * 2;
@halfdouble: @simple + @double;

color: #666 / 3;
background-color: @somecolor + #250;
height: 100% / 2 + @double;

A noter que LESS conserve les unités, ainsi 10px * 2 donne 20px.



Fonctions pour les couleurs



Ces fonctions sont très pratiques pour décliner un jeu de couleurs par exemple pour élaborer un thème.

Voici quelques exemples:


lighten(@somecolor, 30%);     // 30% plus lumineux que @somecolor 
darken(@somecolor, 30%);      // 30% plus sombre que @somecolor

saturate(@somecolor, 3%);    // 3% plus saturé que @somecolor
desaturate(@somecolor, 3%);  // 3% moins saturé que @somecolor




Pour conclure



Nous avons fait un petit tour d'horizon des fonctionnalités proposées par LESS.

Si vous souhaitez voir LESS en action dans un projet tout aussi intéressant je vous conseille de jeter un oeil sur Boostrap Twitter qui en fait un usage intensif.


J'ai peu utilisé LESS mais je trouve ce projet bien conçu et tout à fait indispensable.


Il serait très intéressant que les concepts LESS deviennent réellement une extension officielle de la norme CSS.


Le seul manque important à mon sens est l'absence d'outillage côté JEE pour la compilation des feuilles LESS.  


Il serait également intéressant de disposer d'une grammaire  ANTLR par exemple, qui permettrait de proposer un support des IDEs pour les fichiers LESS  : complétion, coloration syntaxique, ...

Mais nous verrons plus tard comment intégrer LESS côté serveur JEE grâce au moteur Javascript Rhino. 







Contrat Creative Commons
the jee architect cookbook by Olivier SCHMITT est mis à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Pas de Modification 3.0 Unported.




Aucun commentaire:

Enregistrer un commentaire