LessCss avec node.js

Un petit tuto aujourd’hui pour installer Node.js et LessCss afin d’obtenir le compilateur de CSS.

L’installation se passe sur un serveur ubuntu 10.04.
Pré requis:

Git
Un compilateur 

Installation de Node.js
dans le dossier /usr/src nous allons cloner le dépôt de joyent à savoir le papa de node

git clone https://github.com/joyent/node.git

On prend la version stable du moment

git checkout v0.6.10

La compilation:

cd node
./configure
make && make install

Et voila! vous avez node.js sur votre serveur!

Maintenant nous allons installer NPM (pour Node Package Manager)
Retournons dans notre /usr/src pour installer npm

git clone --recursive git://github.com/isaacs/npm.git
cd npm
node cli.js install npm -gf

NPM est prêt, il nous reste à installer less

npm install less

On va copier notre bin afin de l’avoir directement dans notre terminal. Direction notre /usr/bin afin de créer un lien symbolique vers notre compilateur.

ln -s /usr/src/npm/node_modules/less/bin/lessc

Et voila, on a notre compilateur sous le coude!

Un petit lessc dans le terminal?
ET LA! PAFF !

Error: require.paths is removed. Use node_modules folders, or the NODE_PATH environment variable instead.

ou encore

Error: Cannot find module 'less/parser'

On debug, la solution est peut être pas la meilleur, mais elle fonctionne! j’ai mon compilateur fonctionnel
On va editer et commenter la ligne 5 de:

pico /usr/src/npm/node_modules/less/lib/less/index.js

Et également commenter la ligne 7 de:

pico /usr/src/npm/node_modules/less/bin/lessc

et rajouter dans notre profile les infos du path de node:

pico ~/.profile

et rajouter les lignes

export NODE_PATH=/usr/src/npm/node_modules:$NODE_PATH
export NODE_PATH=/usr/src/npm/node_modules/less/lib:$NODE_PATH

Et voila! fini! Un petit test?

On va faire un petit fichier style.less:

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

.rounded-corners{
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

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

  a:link,
  a:visited{
    border-bottom: @the-border solid @base-color;
  }
}

#footer { 
  color: @base-color + #111;
  .rounded-corners
}

On le compile:

lessc style.less > style.css 

Et voila!

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header a:link,
#header a:visited{
    border-bottom: 1px solid #111;
}

#footer { 
  color: #222;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

La classe non? Des multiplications! Des additions! et je vous parle pas des fonctions!

Pour le reste de la syntaxe et les possibilités de lesscss je vous laisse visiter le site: http://lesscss.org/#synopsis

About bourvill

Dev symfony/php passionné par le web et ce qui gravite autour