Pour le projet sur lequel je travaille, je suis amené à utiliser Twitter Bootstrap qui est un bienheureux mélange de css et de javascript vous permettant de rendre votre site plutôt “Touchy” en 3 fois rien de temps. La distribution de Bootstrap dispose de ses fichiers Css mais aussi des fichiers LESS qui ont servi à les générer. Je ne m’en étais pas particilèrement ému jusqu’à ce que Stéphane, mon collègue, m’incite à y regarder de plus près pour éviter de m’enm……comme je le faisais. Je me suis donc penché sur LESS qui permet de passer de règles aussi lisibles que :

@color: #4D926F;
@white: #FFF;

#header {
  color: @color;
  h1
  {
  	background-color: @color;
  	color: @white;
  	span
  	{
  		display: none;
  	}
  }
}
h2 {
  color: @color;
}

en :

#header {
  color: #4d926f;
}
#header h1 {
  background-color: #4d926f;
  color: #ffffff;
}
#header h1 span {
  display: none;
}
h2 {
  color: #4d926f;
}

… ce qui pour l’exemple, ne parait pas plus simple forcément, mais, la différence se sera sur un site entier. D’autant que je n’ai pas mis en oeuvre la minification pour préserver la lecture.

Vous en saurez plus en lisant la suite de l’article et comprendrez tout l’intérêt de passer vos développement Css en LESS…

Continuer la lecture →