Des CSS dynamiques grâce au langage LESS
Article par Chok71 (Développeur Web)
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
...
}
cris_ a dit le
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 ?