9mar/121

[astuce] garder en mémoire votre ftp avec nautilus

Pour les utilisateurs de linux, et plus particulièrement ceux utilisant Gnome, je vais vous donner une petite astuce pour vous connecter à votre ftp via nautilus, mais surtout je vais vous montrer comment garder cela en mémoire sans devoir à chaque montage remettre vos identifiants.

En effet je pense que la plupart savent déjà comment se connecter à son ftp par nautilus, mais peut être que comme moi, vous vous êtes dit "j'en ai marre de mettre à chaque fois mon identifiant, mot de passe etc...".
Jusqu’à aujourd'hui  je ne m'était pas réellement penché dessus, tout simplement car je pensais que l'on devait forcément passer par un script.

Aujourd'hui je me suis dit "aller on va mettre les mains dans le camboui et faire ce script". J'ai donc fait quelque recherches et je suis finalement tombé sur une solution beaucoup plus simple, qui peut paraître évidente maintenant que je la connais, mais qui apparemment ne l'était pas assez pour que je la trouve tout seul. Il se peut que plusieurs personnes soient dans mon cas, c'est pourquoi j'écris cet article, afin que ce cette astuce puisse servir d'autres personnes.

Mais au cas où vous ne sachiez pas comment monter votre serveur ftp via nautilus je vais vous montrer comment faire. Ceci a l'avantage de monter votre ftp comme si c'était un simple disque dur, c'est donc très pratique pour manipuler les fichiers de votre serveur, utiliser n'importe quel éditeur de texte qui n'a pas forcément de plugin ftp intégré (coucou sublime text 2). Cette fonctionnalité me manque d'ailleurs terriblement sur windows, j'ai essayé de trouver des logiciels de remplacement, mais je n'ai pas du tout ressenti la même transparence qu'a cette solution.

Bref, on ouvre nautilus, on clic sur ficher, "Se connecter à un serveur..." et cela nous ouvre une fenêtre de configuration.

configuration nautilus ftp

 

On n'oublie pas de changer le type de serveur et mettre "FTP (avec identification)"  et on remplis les informations demandées. On coche "Se souvenir de ce mot de passe" si on ne veut pas devoir retaper son mot de passe à chaque connexion (jusque la c'est logique ^^).
On clic sur Se connecter une fois fait, cela nous ouvre une nouvelle fenêtre nautilus avec notre ftp ouvert (à l'endroit désiré si on a changé le dossier lors de la configuration). A noter que ce ftp est affiché dans la partie Réseau.

Maintenant nous allons voir comment garder ce ftp dans nos raccourci nautilus, afin d'avoir juste à cliquer sur ce raccourci pour monter à nouveau notre ftp sans avoir à re rentrer toutes nos infos (c'est le but de cet article 😉 ).
Pour cela il suffit de faire un clic droit  sur le ftp et de mettre "Ajouter un signet". Et oui c'est aussi simple que cela!

 

nautilus Ajouter un signet

Vous aurez donc un raccourci dans votre panneau latéral que vous pourrez renommer en faisant un clic droit dessus. Le mien s'appelle maintenant EuroWH puisque je suis chez eux (pub inside ^^).

Tout cela était vraiment simple, mais on n'y pense pas forcément, d'ou l'intérêt d'en faire un petit article :)

ps : bien entendu pour le transfert de fichier, autre que ponctuel, je vous conseil de prendre un "vrai" client ftp 😉

3mar/124

Utilisation de LESSphp et intégration dans wordpress

MaJ : Changement de méthode pour insérer le thème.

Comme je vous l'avait promis je vais faire des articles plus régulièrement (enfin plus souvent, ça ne sera pas forcément régulier ^^).

Je vais donc cette fois-ci vous montrer comment intégré LESS du côté serveur, pour ne plus être dépendant du côté client (avec le javascript) mais aussi pour ne pas alourdir plus que nécessaire le site.

Pour cela nous allons utiliser LESSphp qui permet de compiler LESS via php (logique vu son nom). Sinon il reste bien sur la possibilité d'utiliser node.js mais cela n'est pas disponible sur les serveurs mutualisé (à ma connaissance), le php par contre est utilisable (quasi) partout.

Il y a plusieurs méthodes proposé par ce compilateur, mais on va s'intéressé ici à la compilation automatique de tous nos fichier LESS dans un seul fichier css avec un système de cache.

Ceci n'est pas la méthode proposé dans la doc de LESSphp, du moins ce n'est pas le même code. Pourquoi? Tout simplement car j'ai essayé avec wordpress et je n'ai pas réussi à faire fonctionner cette fonctionnalité avec le code proposé dans la doc. Du coup j'ai cherché une autre méthode, et celle-ci me parait d'ailleurs plus efficace.

Ce code je l'ai donc pris ici : http://net.tutsplus.com/tutorials/php/how-to-squeeze-the-most-out-of-less/

N'hésitez pas à aller sur cette page, ce n'est pas uniquement en rapport avec LESSphp mais cela parle de LESS en général avec une sorte de mini-tuto.

Nous allons voir comment intégré tout cela à wordpress, bien entendu la technique étant la même pour n'importe quel site internet vous n'aurez pas de mal à adapter cela à vos besoin.

Mon thème wordpress se présente comme cela :

dossier thème wordpress

Comme vous pouvez le voir j'ai un dossier lessphp où il y a les fichiers que vous téléchargerez ici : http://leafo.net/lessphp/#download

Ensuite j'ai un dossier stylesheets où je mets tous mes fichiers concernant less ou css. Le fichier styles.php est celui qui va nous permettre de compiler les fichiers .less en .css.

Bien entendu toute cette arborescence n'est pas obligatoire, vous vous arrangez comme vous voulez, mais j'aime bien quand c'est propre.

Maintenant nous allons voir le contenu de ce fichier styles.php :

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler");
else ob_start(); 

$files = array(
    'config.less',
    'app.less',
    'global.less',
    'typography.less',
    'grid.less',
    'ui.less',
    'forms.less',
    'orbit.less',
    'reveal.less',
    'mobile.less'

); 

$time = mktime(0,0,0,21,5,1980);
$cache = 'cache.css';  

foreach($files as $file) {
    $fileTime = filemtime($file);  

    if($fileTime > $time) {
        $time = $fileTime;
    }
}  

if(file_exists($cache)) {
    $cacheTime = filemtime($cache);
    if($cacheTime < $time) {
        $time = $cacheTime;
        $recache = true;
    } else {
        $recache = false;
    }
} else {
    $recache = true;
}  

if(!$recache && isset($_SERVER['If-Modified-Since']) && strtotime($_SERVER['If-Modified-Since']) >= $time){
    header("HTTP/1.0 304 Not Modified");
} else {
    header('Content-type: text/css');
    header('Last-Modified: ' . gmdate("D, d M Y H:i:s",$time) . " GMT");  

    if($recache) {
        require '../lessphp/lessc.inc.php';
        $lc = new lessc();  

        $css = '';  

        foreach($files as $file){
            $css .= file_get_contents($file);
        }  

        $css = $lc->parse($css);
        file_put_contents($cache, $css);
        echo $css;
    } else {
        readfile($cache);
    }
}
?>

Alors qu'avons nous là? La toute première partie permet de zipper le fichier css qui sera fait.

Ensuite nous avons la partie dont vous devrez vous souciez : la déclaration des fichiers à compiler. Cela passe par un array, rien de plus simple.

Ensuite pour chaque fichier on vérifie qu'il n'a pas été modifié depuis la dernière mise en cache, si cela a été modifié on lance donc la compilation.

if($recache) {
        require '../lessphp/lessc.inc.php';
        $lc = new lessc();

C'est ici dans le require (ligne 49 dans mon fichier) que nous allons spécifier le chemin vers la librairie LESSphp : lessc.inc.php. Dans mon exemple c'est dans le dossier lessphp d'ou le chemin '../lessphp/less.inc.php'.

Maintenant que nous avons fait tout cela nous allons pouvoir dire à notre header.php d'aller exécuter ce styles.php. Pour cela rien de plus simple, à la place où vous auriez mis votre lien vers votre style.css vous mettez cela :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/stylesheets/styles.php">

Cela aura pour but d'aller activer le fichier styles.php qui se trouve dans mon dossier stylesheets (d'ou le chemin). En faisant cela j'ai découvert qu'il était possible de spécifier un fichier php comme feuille de style, je ne savais pas que cela était possible ^^.

MaJ : autre manière d'intégrer styles.php

Nous allons voir une autre manière plus élégante d'indiquer le chemin de styles.php. Cette façon de faire je l'ai trouvé ici : http://www.geekpress.fr/wordpress/astuce/modifier-dossier-css-principal-theme-wordpress-159/
Il s'agit ni plus ni moins de faire un filtre à la fonction bloginfo(‘stylesheet_url’) pour qu'elle renvoie directement sur styles.php.
Pour ce faire nous allons ouvrir functions.php et ajouter cette fonction :

function stylesheet_uri_filter($stylesheet_uri, $stylesheet_dir_uri) {
	return $stylesheet_dir_uri.'/stylesheets/styles.php';
}
add_filter('stylesheet_uri', 'stylesheet_uri_filter', 10, 2);

Bien sur vous devez adapter cela à la configuration de votre chemin.

Nous devons ensuite ajouter le lien vers notre styles.php, la manière est donc simplifiée grâce à ce bout de code que nous venons de mettre.
A rajouter dans header.php, la où vous mettriez votre lien vers votre css :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

MaJ : garder un fichier style.css à la racine de votre thème

Encore une chose que j'ai découvert par la suite de cet article, "One does not simply delete style.css" : il ne faut surtout pas supprimer de style.css à la racine de votre thème. Ce fichier sert à la déclaration de votre thème avec les différentes infos (auteur, url etc...) et apparemment on ne peut pas déplacer ce fichier ni le renommer...

Fin des MaJ 😉

Et voila nous avons finis, vous pouvez donc dès à présent utiliser ce compileur php pour vos projets.

Au niveau des avantages il y a bien sur de faire cela côté serveur plutôt que client. Il y a aussi le fait de pouvoir organiser ses fichiers sans se soucier du nombre vu que LESSphp vous les compilera en un seul. Cela permet de mieux pouvoir s'organiser et ne pas avoir une seule feuille de 3k lignes ^^.

Au niveau des inconvénients je vois surtout le fait d'utiliser des ressources serveur. Mais cela est moindre du fait de la mise en cache si rien n'est changé.

Si vous ne voulez pas de fichier less sur votre serveur de production vous pouvez utiliser la ligne de commande pour utiliser LESSphp comme compilateur, et ensuite récupérer le fichier css produit. Cela perd l'intérêt de LESSphp et si c'est vraiment ce que vous souhaitez je vous conseil plutôt de prendre un compilateur de votre distribution (cherchez lessc) ou tout simplement des applications qui permettent de compiler une fois le fichier sauvegarder. C'est le cas de la très connue less.app pour mac, sinon il y a simpLESS pour toutes plateforme : http://wearekiss.com/simpless

Vous vous en doutez surement, moi j'ai fait le choix de garder LESSphp pour mes projets. Cela ne fait que quelques jours que je l'utilise, j'espère qu'il n'y aura pas de problèmes de compilations, sinon je me rabattrais sur la solution js pour le dev et ensuite un compilateur pour la prod. (pour le moment aucuns problèmes)

29fév/122

Utiliser github avec Archlinux et sublime text 2 [noob]

Cela fait très longtemps que je n'ai pas écrit d'articles, j'ai décidé de m'y remettre un peu.
Pour cela je vais vous faire part de mes découvertes et avancées dans mon workflow, et en ce moment je m'intéresse un peu plus à git et surtout github. Voyant beaucoup de projets intéressant sur cette plateforme je me suis dit qu'il fallait que je test.
Depuis un petit moment je test des framework css pour faire du responsive webdesign. Je suis tombé sur Foundation et j'ai trouvé un thème wordpress basé dessus ainsi que sur boilerplate : https://github.com/drewsymo/Foundation.
Comme vous pouvez le remarquer ce thème est hébergé sur github, ce qui tombe bien. Je vous ai parlé de LESS dans un autre article, et j'aimerais donner une bonne touche de LESS à ce thème.

Mais dans cet article il sera question de comment utilisé github de façon basique (j'apprends moi même). Cet article va me servir aussi de mémo personnel, c'est pourquoi j'aborde github avec Archlinux.

La doc utilisée principalement : http://help.github.com/linux-set-up-git/
Je vais adapté cette doc pour Archlinux au niveau de l'installation principalement, le reste étant pareil suivant les distributions.

Nous commençons donc par installer git et sa dépendance pour utiliser git-gui (vous n'êtes pas obliger de l'installer comme nous n'allons pas l'utiliser).
Je vous invite fortement à utiliser yaourt, qui est un outil qui rajoute des fonctionnalités à pacman : http://archlinux.fr/yaourt.
Bien sur si vous ne souaitez pas installer yaourt remplacez toutes les commandes yaourt par pacman, n'oubliez pas de passer en root dans ce cas pour installer des programmes ;).

yaourt -S git tk

Ensuite nous vérifier que nous n'avons pas de clés ssh, et ensuite en créer pour utiliser github.

cd ~/.ssh

si vous avez comme message
bash: cd: /home/baptarch/.ssh: Aucun fichier ou dossier de ce type
Cela veut dire que vous n'avez pas de clés.
Si vous en avez déjà, soit vous savez ce que vous faites et dans ce cas je me demande pourquoi vous êtes venu sur cet article, soit vous faites ce que la doc vous demande, c'est à dire faire un backup des clés existentes. je suppose que vous savez déjà faire si vous êtes sur archlinux (juste déplacer les fichiers dans un dossier de backup ^^)

Maintenant nous devons créer des clés ssh pour pouvoir se connecter ensuite à github. (ces clés peuvent servir pour autre choses bien sur, mais là il est question de les utiliser pour github 😉 )

bien entendu nous devons avoir un programme pour créer ces clés :

yaourt -S openssh

La création de clés se fait comme suit : (n'oubliez pas de changer d'adresse mail, celle-ci étant la mienne ^^)

ssh-keygen -t rsa -C "baptistecaquot@gmail.com"

Appuyez sur entrée lorsque l'on vous demande où mettre la clé, elle sera ainsi créée dans /home/votre_nom/.ssh/id_rsa il y aura aussi un id_rsa.pub de créé.
Ensuite vous avez une passphrase à rentrer, c'est comme un mot de passe mais en phrase ^^'. N'hésitez pas à utiliser des espaces, cela fonctionne. Bien entendu je vous encourage à mettre une phrase que vous pourrez vous rappelez facilement, et ne vous inquiétez pas avec linux on a un petit programme qui garde tout ça en tête : ssh-agent.

Maintenant que nous avons notre clé nous allons pouvoir l'indiquer à github pour qu'il puisse nous reconnaître.
Dans l'account settings de github, il faut aller dans SSH Keys, cliquer sur "add new ssh key".
Ouvrez votre clé id_rsa.pub avec gedit (ou autre, le principe est de copier la clé).
Collez la clé dans key (dans titre mettez ce que vous voulez, personnellement j'ai mis baptiste archlinux, ayant déjà une clé que j'utilise pour windows, je veux les distinguer)

Nous allons maintenant tester l'accès à github et voir si nous avons bien fait les étapes précédentes.

ssh -T git@github.com

A ce moment vous aurez "The authenticity of host 'github.com (207.97.227.239)' can't be established." cela veut juste dire qu'il ne connait pas github, dites yes et github sera ainsi dans les hôtes connus.
Votre passphrase vous sera demandez, et si tout se passe bien vous aurez le droit à un "Hi baptwit! You've successfully authenticated, but GitHub does not provide shell access." (avec bien sur le nom de votre compte à la place de baptwit).

Bon maintenant si vous avez fait comme moi pendant la rédaction de cet article, que vous vous êtes dit "je vais changer de passphrase" ou autre et que vous décidez alors de supprimer votre dossier .ssh afin de recommencer et que vous avez déjà fait vos clés, fait le test github, vous aurez surement ce message : "Agent admitted failure to sign using the key. Permission denied (publickey)."
Dans ce cas une fois que vous aurez changer la clé (ida_rsa.pub) dans github il vous suffit de faire ssh-add et tout reviendra dans l'ordre :) (on vous redemande la passphrase bien entendu)

Bon maintenant nous allons configurer git (bien entendu en changeant les infos, à moins que vous ne vouliez vous faire passer pour moi!) :

git config --global user.name "Baptiste Caquot"
git config --global user.email "baptistecaquot@gmail.com"

Ensuite configurez le token github (pour pouvoir utiliser des outils qui n'utilisent pas ssh pour se connecter à github, pour la suite cela ne sera pas très utile, mais au cas où vous souaitiez changer la façon dont vous utilisez github cela peut devenir utile, et comme ce n'est que deux petite ligne qui ne coûte rien, autant le faire de suite !) (pareil, changez l'user)

git config --global github.user baptwit
git config --global github.token votretoken

Bon maintenant nous allons passer aux choses sérieuses!

Commençons la création d'un "repository" ou "repo", un répertoire qui nous permettra d'acceuillir notre projet.
Ici rien de spécial concernant archlinux, tout ce que je vais écrire viens de http://help.github.com/create-a-repo/ et je vais juste résumer ici. N'hésitez pas à aller sur la doc si je ne suis pas assez compréhensible ^^.

Tout d'abord on fait un nouveau repo sur github ("new repositery" sur la page de votre profil).
On remplis les infos demandées, pour ma part je vais juste mettre test-blog.
Cela nous amène sur une page qui résume ce que l'on doit faire.
Vous pouvez passer puisque le but de cet article est de vous montrer comment faire.

Nous devons créer un dossier sur notre ordinateur pour accueillir le projet. Vous pouvez le faire où vous voulez, pour ma part j'ai décidé que je mettrais tous mes repo de github dans un dossier github. Dans ce dossier j'ai donc fait un dossier test-blog.
Avec la ligne de commande il faut vous placez dans votre dossier nouvellement créé.

cd chemin/de/votre/dossier

Une fois dans ce dossier, nous allons initialiser notre git afin de dire "ce dossier test-blog est un repo". Pour cela :

git init

ce qui nous donne :

Initialized empty Git repository in /home/baptarch/github/test-blog/.git/

Cela nous créé un dossier caché le .git qui contiendra toutes les infos git en rapport avec notre dossier test-blog.
Maintenant nous allons dire que ce dossier est lier à celui sur github :
git remote add origin git@github.com:baptwit/test-blog.git
(en changeant bien sur baptwit par votre username et test-blog par le nom de votre projet).

Nous allons maintenant créer un fichier README tout simple. Ce fichier sera affiché sur la page de votre projet en accueil (en dessous de la liste des fichiers). Vous pouvez faire une mise en page pour que github n'affiche pas du simple texte, les markups utilisés par github : https://github.com/github/markup
Vous créez comme vous souhaitez votre fichier README, la doc met un simple :

touch README

Ouvrez votre fichier et mettez y un peu de texte, si vous voulez continuer avec la ligne de commande :

nano README

Maintenant nous allons dire à git que le fichier README doit être pris en compte pour notre projet :

git add README

ensuite :

git commit README -m 'premier commit'

Cela dit que le fichier README a été modifié (bon ok c'est la 1ère fois qu'il est ajouté, mais ce sera la même commande plus tard) et permet d'associer ce commit un message explicatif (la c'est premier commit)
On envoie tout ça à l'origine, qui est le repo sur github.

git push origin master

premier commit

Mon 1er commit


Maintenant vous pouvez commencer à utiliser github, les commandes sont répertoriées ici http://help.github.com/git-cheat-sheets/ et bien entendu je vous invite à chercher de la doc la dessus, mais avec le peu de commande que l'on a vu on peut déjà s'occuper de son repo fraichement créé.

Si comme moi vous avez déjà un repo sur github, que vous l'aviez créé sur windows (ou ailleurs) et que vous comptez l'utiliser il va falloir le récupérer.
Pour cela rien de plus simple :

git clone git@github.com:baptwit/LESS-functions.git

Bien entendu vous changer l'username ainsi que le nom de votre projet 😉
Cette commande vous fera un nouveau dossier contenant tout votre projet, vous pourrez ensuite l'utiliser comme si vous veniez de le créer.

Pour faire un fork d'un projet, lorsque vous êtes sur la page d'un projet que vous souaitez forker, cliquez juste sur fork, cela mettra ce projet dans votre compte, vous pourrez ensuite faire un git clone pour l'avoir sur votre ordinateur.

Je vais vous montrer comment j'ai choisi de travailler avec git.
Beaucoup s'intéressent en ce moment à sublime text 2 et je fait partis de ces personnes.

Pour l'installer sur archlinux, rien de plus simple (merci à AUR) il suffit de faire :

yaourt -S sublime-text-dev

Cette fois yaourt est indispensable puisqu'il récupère sur AUR, ce que ne permet pas pacman, ou alors il faudra le faire manuellement.

Une fois sublime text 2 installé on va lui ajouter un système d'installation de plugin, pour se faire on utilise la doc ici.
Dans cette doc on nous demande d'ouvrir le terminal en faisant "ctrl + `", avec un clavier français pour le faire il faut appuyer sur ctrl + alt gr + la touche 7.
Dans ce terminal on recopie cette commande :

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Si cela ne fonctionne pas peut être que la méthode à changée et je vous invite à aller sur la documentation.

On redémarre sublime text 2, on appuie sur "ctrl + maj + p" et cela nous ouvre une boite de recherche de fonctions de sublime text 2, on cherche (en écrivant) la ligne package control : package install, on appuie sur entrée et on installe le plugin git qui aura pour but d'installer ce plugin.

Une fois que ceci est installé on à accès à git directement dans sublime text 2, on utilise la commande en ouvrant la recherche de fonctions (ctrl + maj + p) et on tape git + le nom de la commande git.

Plus d'infos concernant ce plugin peuvent se trouver sur le wiki du plugin : https://github.com/kemayo/sublime-text-2-git/wiki

Je m'en vais continuer à apprendre encore plus sur git et github, et je vais aussi continuer à "LESSisé" le thème wordpress dont je vous ai parlé. Je ferais un petit article une fois que j'aurais finis avec ça.

Si vous voyez des inexactitude dans cet article (je commence seulement à essayer github, il y a donc peut être) n'hésitez pas à m'en faire part dans les commentaires.

2mai/111

LESS, le js qui réinvente la façon de faire de la css !

logo LESS

Hier j'ai découvert, à ma grande satisfaction l'existence de LESS, une nouvelle façon de faire de la css.

Pour ma part quand je pense à la css, je pense à quelque chose de très répétitif parfois, qui est dû au manque d'automatisation de certaines tâches. C'est la qu'intervient LESS. Avec on peut faire de la css dynamiquement, avec des variables et des fonctions.

Avant de voir tout cela je vais vous montrer comment intégrer tout ça sur votre site internet.

Tout d'abord il y a l'intégration coté serveur grâce à node.js, si cela vous intéresse je vous laisse aller sur le site pour voir comment faire : LESS server-side usage.

Ici je vais vous montrer comment l'intégrer coté client, grâce a less.js. Vous devez faire un lien vers votre fichier dont l'extension sera .less et non .css ainsi qu'un lien vers less.js:

<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

Il ne faut pas oublier que lorsque vous télécharger le js il ressemble à less-1.0.41.min.js, alors soit vous changer son nom en less.js soit vous changer le lien (personnellement j'ai changé le lien, comme ça je connais quelle version de less.js j'utilise).

Une autre manière de faire est de compiler soit même le code, j'ai trouvé ca pour os X : http://incident57.com/less/, un plugin pour coda (toujours os X) http://incident57.com/coda/index2.php. Bon je n'utilise pas os X, mais sur archlinux il m'a suffit de faire un ptit "yaourt less css" et trouver un compilateur, il en existe peut être ailleurs aussi, je vous laisse chercher au cas où la solution javascript ne vous plait pas.

Maintenant que cela est fait on peut passer au fun et commencer à voir ce que LESS apporte.

Et comme son nom l'indique on a besoin de moins de ligne de code et donc de moins de temps pour faire ce que l'on souhaite. La première chose qui me permet de dire ça c'est la possibilité d'utiliser des variables, et comme un exemple est plus parlant que du blabla :

@vert: #BAC99F;
@ombre-marron: #8A8966;
@jaune-orange: #F2B530;
.pixel {
	font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;	
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000, 2px 2px 0 @ombre-marron, 3px 3px 0 @ombre-marron, 4px 4px 0 @ombre-marron, 5px 5px 0 @ombre-marron;
	color: @vert;
}

Ce qui nous donne en css normale :

.pixel {
	font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;	
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000, 2px 2px 0 #8A8966, 3px 3px 0 #8A8966, 4px 4px 0 #8A8966, 5px 5px 0 #8A8966;
	color: #BAC99F;
}

En mettant de bon noms de variables on peut ainsi rendre le code plus compréhensible (à moins que vous ne compreniez l'hexadécimal...).

Mais si il n'y avait que cette fonctionnalité cela n'aurait peut être pas valu le coup de s'y intéresser. Laissez-moi vous montrer une des fonctionnalité qui m'a fait penser à "je le veux!".
Comme d'habitude mieux vaut un exemple, pour cela je vais reprendre mon bout de code, et suivez bien car cette fois je vais vous montrer deux fonctionnalités !

.logo a,
nav a{	
	.pixel;
	font-size: 1.5em;	

	&amp;:hover{
		text-decoration:none;
		color: @jaune-orange;
	}
}

Et oui on peut réutiliser les propriétés d'une classe dans une autre ! On peut aussi ajouter un pseudo-élément, ce qui nous permet d'éviter de devoir doubler les propriétés (une sans le hover, une avec le hover).

Enfin j'aimerais vous parler de la fonctionnalité qui m'a le plus enthousiasmé : la possibilité d'imbriquer ! Cette fois je vais prendre un exemple du site officiel :

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Ce qui donne en css :

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

Personnellement je trouve cette façon de faire bien plus intuitive et qui respecte plus facilement la hiérarchie de votre page.

Maintenant que vous avez un petit aperçu, je pense qu'il est temps d'aller tester tout ça, c'est par ici que ça se passe : http://lesscss.org/, et vous trouverez d'autres fonctionnalités telle qu'assombrir une couleur, la désaturer

Le seul reproche que je peux lui faire, c'est que si on fait une erreur dans son code ça casse quasiment tout, m'enfin c'est pas plus mal ça permet de repérer directement si on a fait une erreur.

ps : vous pouvez importer de cette manière : @import "lib.less"; (voir importer un .css), malheureusement je ne sais pas pourquoi je n'ai pas réussis à le faire avec une url externe... mais bon il suffit de le faire dans une css normale et voila.