LESS pour SPIP : Less-CSS (anciennement LESSpip)

Utilisation du plugin

Ce plugin compile à la volée tous les fichiers .less.css ou .less du squelette qui contient #INSERT_HEAD. Vous pouvez aussi forcer la compilation d’un fichier ou d’une feuille de style calculée à l’aide du filtre |less_css.

Les fichiers générés sont mis en cache dans /local/cache-less

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) offre de bons exemples de ce qu’il est possible de faire avec LESS :

Variables :

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Mixins

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

Nested rules :

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Operations

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer { 
  color: (@base-color + #111) * 1.5;
}

La balise #CSS

Le plugin introduit une nouvelle balise #CSS qui cherche les fichiers .css ou .less du même nom pour les compiler en fichier .css statique.

Exemple d’utilisation

[<link rel="stylesheet" href="(#CSS{css/style.css})" type="text/css" />]

La balise va chercher un fichier css/style.less ou css/style.css ou css/style.css.html pour retourner un fichier css classique interprétable.

Depuis la version 1.2.3 du plugin (Octobre 2018), le plugin permet d’activer une nouvelle valeur css pour forcer le recalcul des squelettes CSS,
en affichant un bouton d’administration supplémentaire pour &var_mode=css.