Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ? C'est devenu possible grâce au langage LESS, aux frameworks Sass et xCSS. Cet article concernera uniquement le langage LESS et le compilateur LessPHP.
Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet une compilation de votre fichier .less avec Javascript, tandis qu'avec LessPHP la compilation se fera côté serveur avec PHP. L'avantage de ce dernier est au niveau de la compatibilité (vous aurez par exemple aucun problème si un intenaute désactive Javascript).
Installation
Vous devez obligatoirement travailler dans un environnement PHP.
1. Téléchargez le fichier lessc.inc.php sur le site officiel de LessPHP
2. Insérez ce code PHP dans votre fichier HTML :
require 'lessc.inc.php';
try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:
'.$ex->getMessage());
}
3. Indiquez le chemin du fichier lessc.inc.php, celui du fichier sur lequel vous allez travailler (input.less) et celui du fichier CSS qui sera généré par PHP (out.css).
4. Faites un lien vers le fichier CSS avec la balise link :
<link rel="stylesheet" media="screen" href="out.css" />
Vous pouvez maintenant commencer à travailler sur le fichier input.less, PHP fera le reste.
Variables
Stocker des variables est très pratique pour réutiliser une même valeur plusieurs fois et éviter les répétitions.
@val : 15px;
margin-left: @val;
Vous pouvez faire des opérations (additions, soustractions, divisions et multiplications).
.block_content {
margin: 50px + 20;
margin: 20px – 15;
margin: 20px / 2;
margin: 5px * 10;
}
@val1 : 20px;
@val2 : 20px;
.block_content_2 {
margin: @val1 + @val2;
}
Vous pouvez aussi cibler la classe ou l'id qui contient la variable que vous voulez utiliser :
.maClasse {
@val : 15px;
}
.maClasse_2 {
margin: .maClasse[@val];
}
Mixins
Les mixins sont comme des variables mais ils peuvent contenir plusieurs propriétés/valeurs.
.styles_box {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.block_content {
.styles_box;
...
}
.block_content_2 {
.styles_box;
...
}
Vous pouvez cibler la classe ou l'id qui contient le mixin que vous voulez utiliser :
#monID {
.maClasse {
margin: none;
}
}
.maClasse_2 {
#monID > .maClasse;
}
Vous pouvez aussi ajouter un ou plusieurs arguments pour en faire des fonctions :
.styles_box (@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.block_content {
.styles_box(10px);
...
}
.block_content_2 {
.styles_box(5px);
...
}
Un autre exemple :
.styles_box (@marginLeft, @marginRight) {
margin-left: @marginLeft;
margin-right: @marginRight;
}
.block_content {
.styles_box(10px; 10px);
...
}
.block_content_2 {
.styles_box(; 5px); // On n'entre que @marginRight
...
}
Héritage
Cette technique permet d'avoir un code moins répétitif et plus joli.
Exemple d'un code CSS sans LessPHP :
#content1 #block_1 a, #content1 #block_2 a, #content1 #block_3 a, #content1 #block_4 a {
color: #000;
text-decoration: none;
}
#content1 #block_1 span, #content1 #block_2 span, #content1 #block_3 span, #content1 #block_4 span {
color: #fff
text-decoration: none;
}
Grâce à l'héritage, on pourra écrire ce code de la manière suivante :
#content1 {
#block_1, #block_2, #block_3, #block_4 {
a {
color: #000;
text-decoration: none;
}
span {
color: #fff;
}
}
}
Pseudo-classes
Voici comment procéder pour utiliser une pseudo-classe CSS :
a {
color: #000;
text-decoration: none;
:hover {
color: #fff;
}
}
.monBlock {
...
:active {
border: 1px solid #000;
}
}
Contrairement à la compilation sous LessCSS, il ne faut pas ajouter le signe &.
Importation de fichiers
Vous pouvez utiliser la directive @import sur des fichiers .less
@import "fichier.less";
@import url("fichier.less");
Très pratique, surtout que tous ces fichiers seront compilés pour former un seul fichier CSS, donc vous n'aurez pas le problème de peformance lié à cette règle CSS.
Divers
L'instruction // permet d'ajouter un commentaire sur une seule ligne.
.maClasse { // Commentaire
...
}
Commentaires
si j'ai bien suivi, cela permet de se passer :
1- d'un compilateur en JS pendant le développement,
2- d'exporter ses .less en .css lors de la mise en production ?
Pour ceux qui utilisent CMS Made Simple, j'ai porté cette fonctionnalité dans un module : http://dev.cmsmadesimple.org/projects/lesscss...
Je l'utilise quasi constamment, il y a quelques limitations tout de même comme certains hacks IE qui provoquent des erreurs (bon ça en soit…) et, plus problématique, je crois me souvenir que certaines fonctionnalitées (css3) provoquent aussi des erreurs.
J'ai aussi une petite collection de fonctions persos bien utiles : http://pastebin.com/vvnihEGs
ah ben, box-shadow marche une fois sur deux...
Il faut savoir que la version PHP n'implémente pas tout ce que la version officielle permet de faire, voir parfois l'implémente de manière différente. Donc pas toujours compatible avec certaines libs en LESS.
Préférez un petit "aptitude install lessc" par exemple.
ah ben, box-shadow marche une fois sur deux...
Est-ce que ça apporte un réél avantage d'utiliser ça ? concrètement, un "gain" de temps pour un chargement de page plus rapide, ou juste un code plus "joli" ? (jregarde la vidéo dans la soirée)
!! Sass ou Scss fonctionne très bien avec RubyOnRails !!
Note : l'exemple sur l'héritage n'est pas très efficace au final , autant utiliser une classe sur le a et le span
A noter qu'il existe également une version Ruby : https://github.com/cloudhead/less
Pour te répondre @Stayf, je pense que les intérêts majeurs de Less CSS, c'est la ré-utilisabilité, la simplification et la clarté du code CSS (côté développeur). C'est évident que côté client, le résultat reste le même.
Par contre, tu peut prendre le réflexe de développer des "méthodes" ou plutôt "mixins" que tu va implémenter à chaque fois.
Tu peut par exemple, créer un fichier mixins.less comprenant tes mixins et les importer sur tes projets via :
@import "mixins.less";
@import url("mixins.less");
@Stayf : la finalité c'est du css classique donc le gain de temps n'est pas du côté du chargement mais du développement.
@Stayf : la finalité c'est du css classique donc le gain de temps n'est pas du côté du chargement mais du développement.
Le manque de variable m'a toujours gêné en CSS, aussi j'utilise une technique proche de celle décrite ici : http://oldblog.pixarea.com/index.php/2007/01/...
J'ai par contre du mal à comprendre l'intérêt d'apprendre une nouvelle syntaxe (certes proche de CSS) quand tout ou presque peut être déjà fait en PHP simple ?
Si quelqu'un peut m'éclairer !
@Planplan : Si c'est juste le manque de variable qui t'embête il est clair que php seul suffit mais LessPHP apporte tout de même bien plus que ça.
Oui, pour ma part je génère déjà mes CSS en php quand j'ai besoin d'un CSS dynamique... Tout comme je génère du html en php quand je veux du contenu dynamique.
Je ne dis pas que LessPHP n'est pas intéressant (je ne l'ai jamais utilisé), mais le début de l'article m'a interpelé puisqu'il semble laisser entendre que ce n'était pas faisable avant.
@chris_
1. En effet tu n'as pas besoin de la version JS.
2. Tout le travail se fait sur des fichiers .less, l'exportation en CSS se fait automatiquement grâce au fichier "lessc.inc.php". Si tu utilises un IDE comme NetBeans ou Eclipse, il me semble qu'il y a des plugins pour colorer la syntaxe LESS.
@ SauCiSSoN
L'avantage de cette version est que le fichier CSS est généré par le serveur en PHP, donc on a plus à se soucier des problèmes de compatibilités de JS entre les navigateurs, et du fait que ce langage est désactiver chez certaines personnes.
@cahnory :
On peut remplacer élégamment les hack IE,par du "<body> class targeting", si simple que je comprends pas que cette solution est mis 10 ans a être découverte :
http://misteroneill.com/journal/improved-inte...
@Teenage : J'utilise beaucoup (trop ?) cette technique aussi mais ça n'a pas que des avantages. Ça augmente le nombre de sélecteurs, la spécificité, la quantité de code et, on ne peut pas "fonctionnaliser" avec LessPHP. Par exemple dans http://pastebin.com/vvnihEGs je ne peux crée... une fonction comme @inlineBlock sans hack.
"LESS" CSS est une syntaxe assez simple et intéressante. Cela dit, après réflexion, le préprocesseur CSS "SASS" m'est apparu comme étant beaucoup plus complet au niveau de ses fonctionnalités.
Et SASS permettrait d'ailleurs (-> @cahnory) d'introduire des fonctions comme @inlineBlock en utilisant du "class targeting" puisque SASS permet de sélectionner les éléments parents. (Un peu comme le propose le w3c dans ses specs de CSS4)
l'outil "SimpLess" fait la même chose non ?
http://wearekiss.com/simpless
ouh mais ça a l'air sacrément top ce SimpLESS ! et sans les soucis de compatibilité avec CSS3. Merci iManu ! ;-)
@cris_ : derien ;)
Par contre j'aimerai bien trouver un outil pour "inverser" le processus : c'est à dire pouvoir récupérer mes anciens scripts CSS et les transformer en LESS, afin de les utiliser ensuite à partir de less sans devoir tout re-écrire.. si quelqu'un a ça je suis preneur !
il y a une erreur dans la partie "Pseudo-classes" : il faut mettre un & avant :hover sinon un espace sera inséré entre a et :hover !!
http://www.lesscss.org/#-nested-rules
@iManu : avec LessCSS oui mais pas avec LessPHP http://leafo.net/lessphp/docs/#nested ;)
Aussi j'ai pas compris l'intérêt de SimpLESS, car LessPHP compile déjà les fichiers .less en un fichier CSS. J'ai jamais eu de problème avec les propriétés CSS 3, tu peux tester sur le site http://leafo.net/lessphp/#demo
@Vaxilart : Saas est en effet plus complet, mais il fonctionne que sous Ruby.
@Chok71 : au temps pour moi.. mais il y aurait donc plusieurs syntaxes Less ?? ça se complique :(
Pour moi l'intérêt est d'éviter de passer par des appels à des fichiers externes et de faire travailler le serveur : avec simpLess le fichier html insère un .css déjà compilé, étant donné que les fichiers .less sont convertis à chaque sauvegarde durant la phase de développement.
Sinon je suis tombé la-dessus sur le site de lessPHP : "Lessify" http://leafo.net/lessphp/lessify/
Ce qui répond à ma question sur un outil pour inverser le principe : obtenir un fichier less à partir d'un vieux css pour éviter de le ré-écrire à la main en less.. par contre l'outil est encore expérimental, les résultats ne sont pas au top :(
@iManu : je préfère la solution php, il suffit de correctement s'en servir en ne convertissant le less en css seulement lors de la phase de dev/edition. Le reste du temps on appel directement le css.
@Chok71 : LessPHP annule mes box-shadow, alors que le compilateur Javascript et SimpLESS n'ont aucun souci là-dessus. je ne pense pourtant pas avoir fait d'erreurs de syntaxe.
en fait le choix de la solution dépend de la façon dont on travaille sur les fichiers. directement sur le serveur, LessPHP est plus adapté. En FTP, SimpLESS est tout à fait transparent.
@cris_ : Etonnant que tes box-shadow ne soient pas rendus après la compilation, de mon côté ça fonctionne correctement.
Personne n'a de souci à utiliser les media queries avec {less} ?
J'ai fait quelques tests il y a longtemps et ce problème m'a fait abandonner LESS avant même de l'adopter. C'est plutôt dommage vu l'importance que prend le responsive design aujourd'hui.
Si quelqu'un a une solution, je suis preneur.
@Jiho : un fichier css classique et un <link/> en plus ?
Si LESS pouvait gérer les media queries, on aurait ça :
article {
header {
width: 50%;
@media (max-width: 720px) {
width: 100%;
}
}
}
Actuellement, on est obligé de faire :
article {
header {
width: 50%;
}
}
@media (max-width: 720px) {
article {
header {
width: 100%;
}
}
}
Pour les spécifications de certains navigateurs (on les nommera pas), une technique a été développé par Paul Irish.
Côté HTML :
<!--[if IE 7 ]><body class="ie7"> <![endif]-->
<!--[if IE 8]><body class="ie8"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
Côté LESS :
article {
header {
width: 50%;
&&&.ie6 {
width: 49%;
}
}
}
Source : http://www.usabilitypost.com/2011/02/07/a-cal...
Note : Je ne suis pas certain que ces méthodes soient valables pour LESS PHP, contrairement à LESS JS.
@Chok71 : Et ruby est installé de base sur Mac et Linux, et s'installe en 3 secondes sur Windows. Le tout est géré en temps réel, donc pas d'étape supplémentaire comme simpLESS ou un préprocesseur PHP côté serveur.
C'est bien tout ça mais je ne sais pas si c'est la peine de s’enthousiasmer car on peut gagner du temps d'un côté et en perdre de l'autre. Dès que j'ajoute un nouvel outil, je me dis que j'ajoute un nouveau risque d'erreur et si j'ai un problème ensuite, je vais passer quatre fois plus de temps à le résoudre ( une indentation fautive, une mauvaise compilation, que sais-je ? ). En l’occurrence, je veux pas faire mon rabat-joie mais avec un bon éditeur et de l'autocomplétion de code on peut faire un peu moins vite certes, mais bien.
J'avais parcouru l'article une première fois (et signalé une imprécision dans les forums)...
Mais je viens de le re-lire, et dès l'intro je ne suis pas d'accord...
Dès le titre en fait, LessPHP c'est un pré-processeur écrit en Php, ce n'est pas celui d'origine, et c'est juste un petit composant de ce qu'est LESS (il ne sert qu'à la compilation)... Donc à la rigueur ça aurait pu être "Des CSS dynamiques grâce à LESS compilés avec LessPhp"...
Ensuite LESS n'est pas un framework, c'est un pré-processeur, on écrit le code dans un language et c'est compilé dans un autre, comme CoffeeScript pour Javascript...
OSCSS n'a rien à voir, c'est une méthodologie et une philosophie qui s'applique à l'organisation et au nommage, ça de change pas le language utilisé, en l'occurence CSS mais on peut utiliser les principes avec LESS... Et quoi qu'il en soit pas d'héritage au sense POO, juste des méthodes pour utiliser un système similaire avec la cascade, mais rien de plus...
Ce qui est appelé Héritage dans l'article n'est que de l'imbrication, le terme héritage a un lourd sens en POO, qui je le répète n'existe pas en CSS...
Dans la partie Mixins, pour ne rien laisser de côté, il serait bien de signaler que n'importe quelle classe peut être utilisée comme un mixin ailleurs dans le css, et que ces classes seront visibles dans le fichier css produit... Sauf s'il y a des paramètres donc .mixin() { } ne sera pas compilé, mais sera utilisable au sein du fichier LESS.
Erreur déjà relevée, pour la partie pseudo classe... Qui ne concerne pas les pseudos classes d'ailleurs, mais comment accéder à l'élément parent, ça a été dit plus tôt, il faut utiliser & et ça fonctionne avec les id, les classes, les pseudos-sélécteurs, etc etc...
Sinon parler des autres méthodes de compilation, comme JS (qui semble être aborder très vite), mais aussi LESS.app sur Mac, en ligne de commande, etc etc serait bien, puisque comme je l'ai dit, LessPhp n'est qu'un port, pas la technologie en elle même, et même pas sa version originale et officielle.
Ensuite dire que LESS est meilleur, c'est un peu simple, SASS est tout aussi bien et les deux sont quasiment identiques à part les + et autres symboles qui changent c'est du pareil au même... D'autant que SASS est très facilement utilisable dans les projets Ruby On Rails, donc ça peut être une excelente alternative pour les rubyistes plutôt que de passer par LESS qui ne sera pas prise en compte par Ruby lui même et devra être traité à part (avec un compilateur) au final pour rien.
Je trouve ça bien de parler de ce genre de technos, et en plus j'apprécie beaucoup LESS, mais tant qu'à faire autant dire des choses correctes ou exhaustives.
"Dès le titre en fait, LessPHP c'est un pré-processeur écrit en Php, ce n'est pas celui d'origine, et c'est juste un petit composant de ce qu'est LESS (il ne sert qu'à la compilation)... Donc à la rigueur ça aurait pu être "Des CSS dynamiques grâce à LESS compilés avec LessPhp..."
Peu importe, l'outil en lui même se nomme LessPHP, après c'est pas compliquer de savoir qu'il vient de LessCSS. Et le fait de dire que ce sont des frameworks PHP ou Javascript est correct, c'est d'ailleurs le terme accepté un peu partout.
Concernant OOCSS, tu as raisons, mais la dernière fois que j'ai visité le site principal, c'était bel et bien un framework PHP ou Javascript permettant une nouvelle syntaxe CSS inspiré la POO.
"Ce qui est appelé Héritage dans l'article n'est que de l'imbrication, le terme héritage a un lourd sens en POO, qui je le répète n'existe pas en CSS..."
Cette article concerne CSS et non PHP ou Java. Quand je parle d'héritage de classes tout le monde comprend facilement ce que je veux dire.
Pour les pseudos classes, je te confirme qu'avec LessPHP il ne faut pas mettre de &... Test sur le site http://leafo.net/lessphp/
Regarde le premier exemple, avec la classe .logo
"Ensuite dire que LESS est meilleur"
C'est mon avis personnel et il n'engage que moi.
"Je trouve ça bien de parler de ce genre de technos, et en plus j'apprécie beaucoup LESS, mais tant qu'à faire autant dire des choses correctes ou exhaustives."
Moi j’apprécie quand on me critique avec de "vraies" arguments...
Pour OOCSS, j'ai en effet confondu avec xCSS.
L'outil pour compiler s'appelle LessPhp dans ton cas, le language s'appelle Less, c'est comme faire un article "faire des sites avec Notepad" et présenter Html/Css c'est vrai et faux...
Ensuite dire que ce sont des frameworks, pour OOCSS ça peut être vrai, pour LESS nan, désolé c'est un language, cf http://lesscss.org/ au même titre que CSS qu... n'est pas plus un framework (j'espère que là on s'accord au moins).
Cet article concerne CSS utilisé pour faire des sites web, qui fait partie de la programmation informatique, si y'a des développeurs Php ou Java qui se mettent au frontend, le terme héritage va les embrouiller pour rien, d'autant plus qu'il y a un terme correct qui existe pour ça, c'est la cascade, donc je vois pas l'utilité d'avoir un autre terme qui plus est avec un sens aussi lourd que l'héritage...
Pour le fait que LessPhp n'utilise pas & ben ça prouve juste que le port du compilateur ne suit pas les règles du language, c'est bien dommage, mais puisque 75% de l'article concerne le language LESS et pas l'outil pour le compiler, en l'occurence LessPhp, ça pourrait aider de précier que le language, à l'origine utilise & et que du coup y'aura peut être des surprises si on utilise différent moyens de compilation (less.app, lessphp, less.js, ligne de commande).
Je comprend bien que c'est ton avis, mais tu t'addresses aussi à des débutants qui vont te prendre au pied de la lettre, à des gens expérimentés qui vont éventuellement être en désaccord, et ça favorise pas forcément les choses pour qui que ce soit de ne pas aller chercher plus loin que l'article ou de voir des commentaires trollesques...
Ensuite je ne te critique pas personnellement, je ne fais que relever ce avec quoi je suis en désaccord sur l'article... Si mes argument ne sont pas assez "vrais" à ton goût c'est fort regrettable, pour toi, et pour ceux qui vont lire sans réellement comprendre des informations fausses ou inexactes sans avoir les connaissances pour s'en rendre compte et à l'avenir utiliser un vocabulaire approximatif alors que les discussions sur ce qui concerne le développement sont déjà assez complexes avec les anglicismes et la foule de termes à connaître.
"Cet article concerne CSS utilisé pour faire des sites web, qui fait partie de la programmation informatique, si y'a des développeurs Php ou Java qui se mettent au frontend"
La première chose à comprendre si on fait du Java ou du PHP c'est que CSS n'est pas un langage de programmation mais de mise en page. Donc les termes comme "héritage" ont un autre sens que celui des langages de programmations.
Sinon l'article est facile à comprendre et à assimiler pour quelqu'un qui connait bien CSS, il n'est pas spécialement fait pour les débutants.
"Ensuite dire que ce sont des frameworks, pour OOCSS ça peut être vrai, pour LESS nan, désolé c'est un language, cf http://lesscss.org/ au même titre que CSS qu... n'est pas plus un framework (j'espère que là on s'accord au moins)."
Ok je comprends mieux, je vais corriger ça. Merci.
@cris_ : Je parie 1 kiwiz que toutes tes fonctions avec plus d'1 paramètre ne fonctionnent pas avec LessPHP alors qu'elles fonctionnent avec le compilateur Javascript et SimpLESS ;)
Ton erreur de syntaxe enfin ta différence de syntaxe est que LessPHP sépare les paramètres par des ; (points-virgules) quand la syntaxe d'origine est avec des , (virgules). Rétrospectivement NIAAAAARHH (découvert avec LESSElements qu'il faut rapidement adapter à LessPHP avant de pouvoir l'utiliser).
Dommage pour l'incompatibilité mais ceci dit c'est pas idiot comme modification vu que la virgule est maintenant utilisée dans la syntaxe CSS (multibackground, etc) alors que le point-virgule va continuer à être utilisé pour séparer des instructions.
Dans l'article, il est dit
"Contrairement à la compilation sous LessCSS, il ne faut pas ajouter le signe &."
Or si je ne l'ajoute pas, j'obtiens :
a :hover {...}
ce qui rend la pseudo classe inopérante. Je suis alors bien obligé d'utiliser &. A moins que quelque chose m'échappe dans l'article ?
Juste pour argumenter ma remarque, voici ce que j'ai trouvé dans la doc officielle :
"The & operator can be used in a selector to represent its parent’s selector. If the & operator is used, then the default action of appending the parent to the front of the child selector separated by space is not performed."
Mon anglais est plus qu'approximatif mais je crois comprendre que si l'on veut supprimer l'espace entre l'élément et la pseudo-classe, il faut "&"
La doc officielle : http://leafo.net/lessphp/docs/