Utilisation du plugin :
Une fois activé le plugin cherche dans le PATH de SPIP des fichiers « .less ».
Il génère, à partir de ces fichiers et dans leur dossier respectif, des fichiers « mafeuille.less.css » lisible par n’importe quel navigateur.
Il vous suffit ensuite de les inclure dans votre « head.html »
Il s’agit d’un plugin d’aide au développement, il n’est pas conçu pour générer des fichiers css sur le site en production, mais uniquement sur votre copie locale pour le développement.
Le langage LESS
LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de feuilles de style complexes.
La documentation officielle (http://lesscss.org/, implémentation Ruby) offre de bons exemples de ce qu’il est possible de faire avec LESS :
Variables :
- @brand_color: #4D926F;
- #header {
- color: @brand_color;
- }
- h2 {
- color: @brand_color;
- }
Mixins :
- .rounded_corners (@radius: 5px) {
- -moz-border-radius: @radius;
- -webkit-border-radius: @radius;
- border-radius: @radius;
- }
- #header {
- .rounded_corners;
- }
- #footer {
- .rounded_corners(10px);
- }
Nested rules :
- #header {
- color: red;
- a {
- font-weight: bold;
- text-decoration: none;
- }
- }
Operations :
- @the-border: 1px;
- @base-color: #111;
- #header {
- color: @base-color * 3;
- border-left: @the-border;
- border-right: @the-border * 2;
- }
- #footer {
- color: (@base-color + #111) * 1.5;
- }
lesspip.zip
Vos commentaires
# Le 5 novembre 2010 à 12:20, par jeanbaptiste_bourgoin
En réponse à : CSS facile avec LESSpip !
Si si ! Mais je pensais qu’il s’agissait d’un tag « égal et supérieur » à 2.0.
# Le 5 novembre 2010 à 13:22, par Maïeul
En réponse à : CSS facile avec LESSpip !
et bien non ! la raison est simple : il peut y avoir des plugins compatibles 2.0 qui ne le sont pas 2.1 (même si en général c’est plus entre 1.9 et 2.0 que ce se joue)
bizes
Répondre à ce message
# Le 5 novembre 2010 à 00:10, par Maïeul
En réponse à : CSS facile avec LESSpip !
tiens par contre, c’est pas compatible 2. 1 ?
Répondre à ce message