Les actualités du Mercredi 09 novembre 2011 dans les métiers du web - Marmits.com - Reims
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. Mon 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 :
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 de faire un commentaire sur une seule ligne.
.maClasse { // Commentaire
...
}
Ressources
Pour finir, souvenez-vous que Corinne Schillinger avait proposé un atelier très intéressant durant la Kiwiparty, nommé "LESS : moins de CSS, plus de fun". Son intervention est disponible en diaporamas sur Slideshare mais également en vidéo sur Dailymotion.
Pour faire une histoire courte, j'ai toujours voulu utiliser SCSS et SASS pour mes projets web. J'ai acheté et installé Compass.app, super sympathique comme application. Mais j'ai souvent à travailler sur des projets distants. Je voulais donc pouvoir utiliser SCSS sans avoir à télécharger le CSS généré à chaque modification.
J'ai trouvé un moyen de travailler sur un serveur distant, sur un SCSS, enregistrer mes modifications et que je puisse ensuite, tout de suite, rafraîchir ma page et que cette dernière marche avec le CSS généré.
Voici:
- Télécharger PHamlP
- L'installer sur votre serveur distant où vous aller avoir votre CSS.
- Vous créez un fichier .scss et travaillez dessus.
Enfin, vous créez un fichier .php avec ceci à l'intérieur:
'compressed'));
$css = $sass->toCss('style.scss');
echo $css;
?>?
Changez le style.scss par le nom de votre fichier .scss.
Dans votre projet vous mettez dans le header:
?
Vous pourrez ainsi travailler, sauvegarder et ainsi avoir toujours vos dernières modifications dans le projet.
Commentez cet article ! (En plus, SeoMix est en DoFollow)
Article original : WordPress et le référencement ajax.