Intégrer LESS php dans votre thème Dotclear

Dans cette article je propose d'intégrer un compilateur de fichier LESS en php à votre thème Dotclear : lessphp.

Architecture

Je propose d'utiliser l’architecture suivante :

 /
    themes/
        votretrethèmes/
            lib/ : les librairies PHP
                lessc.inc.php : téléchargeable à l'adresse http://leafo.net/lessphp/
            css/ : les fichiers css résultat de la compilation
            less/ : les fichiers less à compiler
            _prepend.php : fichier exécuté avant l’affichage du thème

Dans less, j'y ai placé deux fichiers : main.less et responsible.less. Le premier incluant le second grâce à la règle @import.

Pensez à rajouter les droits en écriture au dossier css (chmod +w css).

Le fichier _prepend.php

Dans le fichier _prepend.php, il faut ajouter les lignes de code suivantes :

  1. <?php
  2. // Compile less files
  3. require dirname(__FILE__).'/lib/lessc.inc.php';
  4.  
  5. try {
  6. lessc::ccompile(dirname(__FILE__).'/less/main.less', dirname(__FILE__).'/css/main.css');
  7. } catch (exception $ex) {
  8. exit('lessc fatal error:<br />'.$ex->getMessage());
  9. }

Rermarque sur LESS PHP

Contrairement à less.js, un certain nombre de règles ne fonctionneront pas avec Less Php et devront être adaptées. Les exemples suivants ne fonctionneront pas avec less php mais fonctionneront correctement avec less.js :

  1. margin: @var / 2 @var;
  2. p {
  3. @media (min-width:960px) {
  4. margin: 30px;
  5. }
  6. }

Les opérations mathématiques doivent être seuls, ou entourés de parenthèses :

  1. margin: (@var/2) @var;

Les medias queries ne doivent pas être incluses dans des règles css :

  1. @media (min-width:960px) {
  2. p {
  3. margin: 30px;
  4. }
  5. }
 
1. Le
26 déc.
2012
11h48
par lunettes kenzo

Salut, j`ai beaucoup aimé votre blog. Je ne suis pas forte dans , avez-vous d`autres articles sur le même sujet ?
Continuez ainsi, c`est toujours agréable de lire vos articles !

Léa.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

À propos

Photographie

Maxence de Flotte

Développeur cœur PrestaShop

Passionné de nouvelles technologies

PHP, HTML5/CSS3, jQuery, Bootstrap, LESS CSS, ...

Voir mon CV

Mes projets