Jean-Baptiste Bourgoin

CSS facile avec LESSpip !

, par Jean-Baptiste Bourgoin

Téléchargement

LESSpip est un plugin intégrant facilement le logiciel LESS (implémentation php) dans SPIP.

Pour télécharger le plugin, rendez-vous sur la page spip-contrib : http://www.spip-contrib.net/CSS-fac...

Utilisation du plugin :

Une fois activé le plugin cherche dans le PATH de SPIP un fichier habillage.less.

Il génère, à partir de ce fichier et dans le même dossier, un fichier habillage_less.css lisible par le navigateur et automatiquement lié dans le <head> par une balise <link>.

Le langage LESS

LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de feuilles de style complexes.

La documentation officielle (http://lesscss.org/, implémentation Ruby) offre de bons exemples de ce qu’il est possible de faire avec LESS :

Variables :

  1. @brand_color: #4D926F;
  2. #header {
  3.  color: @brand_color;
  4. }
  5. h2 {
  6.  color: @brand_color;
  7. }
Télécharger

Mixins

  1. .rounded_corners (@radius: 5px) {
  2.  -moz-border-radius: @radius;
  3.  -webkit-border-radius: @radius;
  4.  border-radius: @radius;
  5. }
  6. #header {
  7.  .rounded_corners;
  8. }
  9. #footer {
  10.  .rounded_corners(10px);
  11. }
Télécharger

Nested rules :

  1. #header {
  2.  color: red;
  3.  a {
  4.    font-weight: bold;
  5.    text-decoration: none;
  6.  }
  7. }
Télécharger

Operations :

  1. @the-border: 1px;
  2. @base-color: #111;
  3. #header {
  4.  color: @base-color * 3;
  5.  border-left: @the-border;
  6.  border-right: @the-border * 2;
  7. }
  8. #footer {
  9.  color: (@base-color + #111) * 1.5;
  10. }
Télécharger