Logo du Blog de Nukium (Samuel Sanchez)

Ressources et tutoriaux : Web 2.0 – PHP – CodeIgniter – Webdesign

lessphp : Un compilateur LESS en PHP !

lessphp : Un compilateur LESS en PHP !

2 août 2009

logo-less

LESS est un environnement de programmation héritant de CSS écrit pour Ruby permettant d’ajouter un grand nombre de fonctionnalités au CSS (variables, opérations, utilisation de classes au sein du CSS, règles en cascade…).

En développant avec LESS, nous n’écrivons plus directement de CSS mais du LESS qui sera compilé en un fichier CSS prêt à fonctionner.

Lessphp rend tout ceci possible dans un environnement PHP grâce à une classe à inclure dans vos scripts afin de compiler du LESS.

Lessphp est en cours de développement et ne supporte pas l’ensemble des fonctionnalités offertes par LESS pour le moment, cependant un certain nombre d’entre-elles sont opérationnelles.

Quelques exemples

  • Inclusion de lessphp et compilation
require 'lessc.inc.php';
 
try {
    lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
    exit('lessc fatal error:<br />'.$ex->getMessage());
}
  • Utilisation des variables et des opérations :
/** LESS **/
@base: 2px; /** Déclaration d'une variable **/
 
.myClass {
  border: 2px + @base solid red; /** Utilisation de la variable au sein d'une opération **/
}
 
/** CSS RESULT **/
 
.myClass { border:4px solid red; } /** CSS obtenu après la compilation **/
  • Utilisation des « mixins » (classes au sein du fichier CSS)
/** LESS **/
@base: 2px; /** Déclaration d'une variable **/
 
.myClass {
border: 2px + @base solid red; /** Utilisation de la variable au sein d'une opération **/
}
 
.mixin {
color: red;
.myClass;  /** Utilisation de la classe .myClass au sein de la classe .mixin **/
}
 
/** CSS RESULT **/
 
.myClass { border:4px solid red; }
.mixin {
  color:red;
  border:4px solid red;
}

Nous voyons bien de cette manière que nous pourrions grandement améliorer notre code CSS et factoriser énormément de code ! De plus, la compilation s’effectuant côté serveur, il est tout à fait possible de générer dynamiquement le CSS via un appel ajax en fonction d’évènements homme-machine par exemple.

Il est à noter que lessphp est disponible sur la plateforme github et qu’il vous ait donc possible de signaler les éventuels bugs que vous rencontrez ou encore récupérer les toutes dernières versions de la librairie.

Alors, pensez-vous que lessphp pourrait améliorer votre code CSS ?

Pour plus d’informations

One comment

  1. Améliorez vos #CSS avec #LESS dans un environnement #PHP grâce à #lessphp : http://bit.ly/12gRkY

Similar entries

Leave a Reply

Optimized by SEO Ultimate