Une appli Mac pour développer ses CSS avec Less.app
13 Août 2010
Le développement CSS est aujourd'hui un domaine complexe et l'apparition des nouveautés du CSS3 ne vont pas simplifier les choses, par exemple avec les préfixes que les navigateurs utilisent. Malgré cette complexité qui augmente, les feuilless de styles ne sont pas un langage de programmation et donc on ne peut pas utiliser certaines fonctionnalités basique de chaque langage...
Comme je l'ai dit, en CSS on a pas de variables, pas de fonctions bref toute les données sont statiques. Mais cela pourrait être tellement pratique dans certains cas, par exemple en CSS3, les préfixes posent ce genre de problèmes
.rounded-5{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Si je veux changer la valeur de la border, je dois manuellement changer chaque ligne... Quelle perte de temps lorsqu'il y a beaucoup d'éléments...
less ?
Heureusement less est là ! Cet framework de développement pour les CSS est tout simplement génial, il va vous permettre d'utiliser des variables, des fonctions (appelées mixins), de gérer l'héritage de vos classes CSS ou encore de faire des opérations mathématiques.
Bref pas mal de petits choses qui ajoutent du piquant au développement de feuilles de styles. Ainsi pour l'exemple ci-dessus, on va avantageusement utiliser une variable ce qui va donner le code suivant :
@radius: 5px;
.rounded-5 {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Pour pouvoir utiliser ces fonctionnalités, il suffit de renommer vos fichiers CSS avec l'extension .less, de tirer parti des fonctionnalités du framework, puis de compiler vos fichiers pour les transformer en fichiers CSS. Eh oui, il faut compiler vos fichiers après chaque modification que vous faites, mais heureusement une application pour Mac existe afin de vous simplifier la vie.
Cette petite présentation du framework less est un peu simpliste, mais ce n'est pas l'objet de ce post. Besoin de plus d'informations ?
L'application Mac Less.app
Devoir compiler les fichiers less est pour moi un frein à l'utilisation d'un tel outil. Certes il existait un daemon ruby pour compiler les fichiers less en background, mais je ne trouvais pas cela pratique. Il fallait ouvrir une fenêtre du Terminal pour naviguer vers le répertoire des sources en surveiller chaque fichier less. Bref ce n'était pas pratique du tout...
Mais depuis le début de l'année, une application Mac permet de facilement compiler les fichiers less en background pour faciliter le développement de votre site.
Cette application fonctionne à merveille et permet d'intégrer less très facilement dans votre process de développement. Je vous conseille d'aller voir le site de l'application pour voir une vidéo de démonstration complète et qui montre l'efficacité de l'appli.
En outre, elle dispose de quelques options sympathiques tel que :
- Surveilles les modifications des fichiers
less - Changer le répertoire de destination du fichier CSS généré
- Minifier le fichier généré
- Une sortie pour voir les erreurs de compilation
- Réouvre les derniers projets
Le moteur interne de l'application est node.js et il utilise la version node de less, du coup pas besoin d'installer le framework sur son poste, tout est inclus dans l’application.
Conclusion
Cette application est tout simplement un must-have si vous utilisez le framework less. Personnellement je suis plus que convaincu je pense que je vais utiliser cette application avec less pour mes projets personnels tellement j'ai le sentiment que l'apport de less au développement est intéressant.
Le seul petit reproche que je lui fait, c'est qu'il n'est pas encore capable de combiner plusieurs fichiers less, c'est le seul reproche que j'ai à lui faire aujourd'hui.
Cette application me donne envie de coder une appli similaire pour minifier et combiner les JS d'un projet....
EDIT : Marie a publié un commentaire qui conseille d'utiliser l'attribut @import pour concaténer les fichiers, ce qui est tout à fait logique mais je n'y avais pas pensé lors de la rédaction.