Comment rédiger votre less ?
Nous rédigons notre less d’une façon assez standard, en s’inspirant des tutoriels suivants :
- DON'T READ this Less CSS Tutorial (Highly Addictive)
- 10 LESS CSS Examples You Should Steal for Your Projects
Less peut également être d’une grande utilité si vous comptez mettre en place une grille dynamique, auquel cas je vous renvois vers cet article.
Un fichier nommé var_fun (less) est appelée à l’aide d’un @import tech/less/var_fun judicieusement placé au début de nos fichiers. Rien de fantastique dans ce fichier, surtout une mutualisation bien pratique des couleurs, styles de bordures, etc. Ce fichier vous est tout de même proposé, pour l’exemple et les raccourcis pour les propriétés propriétaires :
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Bienvenu dans la feuille de style less de micr0lab. *
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* Cette feuille regroupe et mutualise quelques
* fonctions bien pratiques, appelées depuis différentes
* feuilles de style :
* — https://micr0lab.org/ecran.less qui gère l’ensemble du site,
* — https://micr0lab.org/tech/syntaxh/shThememicr0lab.less qui personnalise syntaxhighlighter,
* — https://micr0lab.org/tech/jplayer/jplayer_micr0lab.less qui personnalise le lecteur jplayer,
* — et diverses autres feuilles appelées ponctuellement.
*
* Elle est commentée et sous licence art libre, retrouvez d’autres
* informations à propos de less à https://micr0lab.org/tech/less/
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*
* On commence par définir des couleurs employés de façon récurrente sur le site.
*/
@couleur_defaut_fond:#fffff0;
/*fond du corps, le fond de popup_block, pour #logo a (qu’on ne voit pas le texte), couleur de pre*/
@couleur_fond_grise:#F4F4E6;
/* Le fond de pre pour le theme de syntaxhighlighter.*/
@couleur_defaut_texte:#1f2322;
/* La couleur du texte du corps, du texte de nav a:hover et du bord de a:hover .presentation*/
@couleur_survol_lien:#F5F5F5;
/* Le fond de a:hover et le fond de a:hover .presentation */
@couleur_texte_survol:#43a4ff;
/* Pour le texte de a:hover */
@couleur_texte_lien:#000;
/* Pour couleurs de a:focus, a:active */
@couleur_bords:#b6b6a3;
/* Les bords de nav a:hover,#logos a:hover, #logos a:focus, nav a:focus, de [type:submit], [type:email], de popup_block */
@couleur_fond_lien_actif:#D4D4D4;
@a_nommer:#ccccc0;
/* Pour text-shadow des titres h1 h2 h3, box-shadow de a:hover .presentation et nav a:hover,#logos a:hover,#logos a:focus,nav a:focus, [type:submit],[type:email] (formulaires), pre, popup_block */
@anommer_2:#DCDCC6;
/* fond de nav a:hover de fade (pop-up) et les bordures de .bord_centre et .presentation */
/* Plus d’autres couleurs ponctuelles, sans variables :
* (Plus à jour ?)
* #98988e pour border de pre
* gray ( #BEBEBE ) pour liens
* #D4D4D4 fonds de a:focus, a:active
* @couleur_texte_lien;
* #2F4F4F pour a:visited
* #3F3F3F couleur de fond de pre
* Plus dans tete.php : $classe img{background-color:@anommer_2; border : 1px solid @couleur_bords; margin : -1px; border-radius : 8px; box-shadow: 3px 3px 2px 2px #ccccc0;}";
* Cas un peu special KBD :
* border-color:#edd #baa #baa #eed;
* background:#faf6f6;
* color:@couleur_texte_lien;
*/
/*
* Fin des couleurs.
*/
/*
* Des chemins.
*/
@urlimage:"images/internet/";
@urlsprite:"images/sprite.png";
/*
* Fin des chemins.
*/
/*** SPRITE **/
@taillepictomenu : 55px;
@hauteur_menu : @taillepictomenu * 9;
@largeur_menu : @taillepictomenu;
@largeur_sprite : 300px;
@hauteur_sprite : 800px;
@taille_logo : 25px;
@taille_logo_marge : 30px;
@decalage_vertical_logo : (-@largeur_sprite + @taille_logo + 2) ;
@paddinglogos : 2px;
/*
* Raccourcis pour extensions propriétaires et autres valeurs par défaut.
*/
.border-radius (@radius: 8px) {
border-radius: @radius;
}
.box-shadow-custom (@topleft: 3px, @topright: 3px, @bottomleft: 2px, @bottomright: 2px, @color: @a_nommer ) {
box-shadow: @topleft @topright @bottomright @bottomleft @a_nommer;
}
.colonnes (@nombre :2){
-moz-column-count:@nombre;
-webkit-column-count:@nombre;
column-count:@nombre;
}
.transform_rotate(@angle : 90, @origine_x : 50%, @origine_y : 50%){
transform: rotate(@angle deg);
transform-origin:@origine_x @origine_y;
-ms-transform: rotate(@angle deg); /* IE 9 */
-ms-transform-origin:@origine_x @origine_y; /* IE 9 */
-webkit-transform: rotate(@angle deg); /* Safari et Chrome */
-webkit-transform-origin:@origine_x @origine_y; /* Safari et Chrome */
-moz-transform: rotate(@angle deg); /* Firefox */
-moz-transform-origin:@origine_x @origine_y; /* Firefox */
-o-transform: rotate(@angle deg); /* Opera */
-o-transform-origin:@origine_x @origine_y; /* Opera */
}
.transform_scale(@echelle){
-moz-transform: scale(@echelle);
-webkit-transform: scale(@echelle);
-o-transform: scale(@echelle);
transform: scale(@echelle);
-ms-transform: scale(@echelle);
/* On pourrait ajouter pour une compatibilité Internet Explorer :
* filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod:'auto expand', M11:@echelle, M12:-0, M21:0, M22:@echelle);
* */
}
.transition(@prop : all, @temps : .5s, @effet : ease){
-webkit-transition: @prop @temps @effet;
transition: @prop @temps @effet;
}
/*
* Fin des raccourcis pour extensions propriétaires.
*/
/*
* Raccourcis utiles
*/
.italique (){
font-style:italic;
}
/* Pour cacher du texte, mieux vaut éviter le display:none,
* qui rend le texte inaccessible aux navigateurs textuels.
* On emploie la méthode de http://beta.rdsign.net/article_67
* Cependant, avec text-indent: 100%;, une partie du texte est visible
* à des endroits où on ne le souhaite pas, on passe donc à 150%. */
.cache_texte{
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
}
/*
* Fin des raccourcis utiles.
*/
/*
* Personnalisations propres à micr0lab.
*/
.border (@epaisseur:1px, @couleur : @couleur_bords){
border:@epaisseur solid @couleur;
}
.ombre(@droite:1px, @bas:1px, @fuzzy:1px, @couleur : @a_nommer){
text-shadow:@droite @bas @fuzzy @couleur;
}
.encadrement_base (){
.box-shadow-custom ();
.border-radius ();
.border();
}
.lien_defaut(){
color:@couleur_texte_survol;
background-color:@couleur_survol_lien;
.border-radius();
}
.transition_lien() {
.transition(background-color, .5s, ease-in-out);
}
Transformer less en css
Plutôt que de faire compiler notre fichier less par le client à la demande avec less.js — une bibliothèque javascript — il nous a paru préférable de compiler sur notre machine et de mettre en ligne le fichier css obtenu. Pour compiler depuis votre ordinateur, pas mal de solutions existent: installer node.js, utiliser CSS::LESSp, lessphp ou encore lesspy dans votre terminal, mais la plupart sont obsolètes. lessphp a été mis en conformité avec des versions plus récentes de PHP
Avec lessphp
Le logiciel (en tout cas, la version employée, modifiée par mes soins) fait son travail, et s’y tient : il convertit le less en css, et c’est tout.
Si vous voulez optimiser un peu le fichier css obtenu, vous pouvez le compresser à l’aide de CSSTidy, par exemple. Si vous employez une commande comme
csstidy source.css --lowercase_s=true --preserve_css=true --remove_bslash=false --template=highest --timestamp=true cible.css
Alors, mystérieusement, certaines media-queries sont détruites : @media only screen and (max-height: 620px) devient @media only screen and max-height620px, qui n’a pas d’effet. On effectue une substitution au moyen de sed, que vous retrouverez ci-dessous.
Une commande de compilation est enfin définie dans geany, et le less est rapidement compilé, compressé, commenté, integré. Voilà qui donne, par exemple :
/donnees/micr0lab/sites/micr0lab/tech/less/./plessc %f > %e_sans_tidy.css && csstidy %e_sans_tidy.css --lowercase_s=true --preserve_css=true --remove_bslash=false \ --template=highest --timestamp=true %e_sans_sed.css && sed 's/@media \([a-Z]*\) and \([a-Z\-]*\) \([0-9]*\)px/@media \1 and (\2:\3px)/' %e_sans_sed.css > %e.css && sed -i '1i/* ***************************** * Voilà une feuille de style de micr0lab ! * Infos sur le css à https://micr0lab.org/tech/css/ * Infos sur less à https://micr0lab.org/tech/less/ * Pour voir le fichier %e.css sans compression, rendez-vous à %e_sans_tidy.css * Pour voir la source en .less de %e.css, rendez-vous à %f * Code le plus souvent sous licence art libre, infos à https://micr0lab.org/rouage/droits/#d_site * ***************************** */' %e.css
Avec node.js
Les instructions sur le site sont claires et complètes, sur un environnement correctement préparé (ce qui comprends installer npm), un simple
npm install -g less npm install -g less-plugin-clean-css
(en étant administrateur) devrait vous installer tout le nécessaire pour facilement compiler et compresser votre less. Employez une commande telle que
lessc --clean-css source.less > cible.css
Notez que nous mettons en ligne aussi bien les fichiers .less que les fichiers css, consultez le code source pour en savoir plus.