LESS pour SPIP : Less-CSS (anciennement LESSpip)

Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP.

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.

Il utilise le compilateur LESS pour PHP LessPhp

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.

Discussion

2 discussions

  • 1

    Bonsoir,

    Juste pour mémoire, voici une lib LessPHP maintenue par la fondation Wikimedia :
    https://github.com/wikimedia/less.php/blob/master/CHANGES.md

    Et compatible php 7.3

    Répondre à ce message

  • 2

    La dernière mise à jour de Lesscss provoquait le message d’erreur
    « parse error unexpected [ in .../lesscss_fonctions.php ligne 154 »
    Je n’ai pas su trouver l’erreur en examinant le fichier (rev 117659) mais j’ai fini par le remplacer par sa version précédente (rev 114181) ce qui fait disparaître le problème.
    Comme je ne disposais pas de la version précédente de lesscss, j’ai simplement remplacé le fichier php, les autres fichiers restant ceux de la dernière distribution.
    A ce sujet, pouvoir télécharger la version n-1 de chaque plugin serait un avantage.

    • C’est une syntaxe utilisée dans les dernières versions de PHP.

      J’ai corrigé sur la version 1.4.4 du plugin.

      Pour les versions n-1 des plugins : ca attendra la fin du travail / reflexion sur les outils de dev communautaires de SPIP.

    • La version 1.4.4 fonctionne sans problème pour moi.
      Merci pour la réactivité ainsi que pour tout ce que vous faites (sans oublier les autres développeurs de la communauté SPIP).

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom