Souvenez-vous, je vous ai déjà parlé du format LESS dans ce billet Faire des feuilles de style dynamique avec le format LESS CSS .

Depuis, j'utilise régulièrement ce format et je me suis rendu compte que l'on pouvait vite être "frustré" par les fonctions proposés et que, pour parfaire nos codes, il était intéressant de se créer ses propres mini fonctions. 

Prenons l'exemple des positions. 

Il arrive fréquemment que nous ayons à placer des éléments en absolu par rapport à d'autres blocs et que, pour cela, nous nous retrouvons à faire 3 déclarations : 

  • le type de position (position:absolute;)
  • la position verticale (top ou bottom)
  • la position horizontale (left ou right). 

La mini fonction que j'ai créé ne m'a pas pris plus de 10 minutes et permet à présent de ne faire qu'une seule déclaration. 

En effet, seul une ligne permet d'appliquer la position absolue sur un élément.

Code

Déclaration fonction LESS : 

.absolute(@t :0, @r :0, @b :0, @l :0) {
  position:absolute;
  .absolutetop (@t);
  .absoluteright (@r);
  .absolutebottom (@b);
  .absoluteleft (@l);

  .absolutetop(@t) when not (@t = 0) { top: @t;} // top si != 0
  .absolutetop (0) {}

  .absoluteright(@r) when not (@r = 0) {right: @r;} // right si != 0
  .absoluteright (0) {}

  .absolutebottom(@b) when not (@b = 0) { bottom: @b;} // bottom si != 0
  .absolutebottom (0) {}

  .absoluteleft(@l) when not (@l = 0) { left: @l;} // left si != 0
  .absoluteleft (0) {}
}

Déclaration dans vos templates : 

.madiv{
.absolute(26px, 0, 0, 172px); // .absolute(@top, @right, @bottom, @left)
}

... qui remplace cette déclaration : 

.madiv{
position:absolute;
top:26px;
left:172px;
}

SI la valeur est 0, la déclaration ne sera pas prise en compte.

C'est pas la fonction du siècle mais elle est utile.