Vous êtes à : Accueil > Nos techniques > Appréhender less

Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

LESS pour écrire moins en faisant plus.

LESS est un pré-processeur de css : vous écrivez un document selon certaines règles — qui se comprennent vite si vous connaissez le css et des rudiments de programmation — et vous obtenez simplement un css facile à mettre à jour et à retoucher.

Le css de ce site est ainsi compilé à partir de fichiers less, dont le site officiel contient toutes les informations utiles. Avant d’apprendre ce langage, réflechissez à quel pré-processeur css est le mieux adapté à vos besoins, par exemple en lisant cet article et ses commentaires : Stylus, Sass, Scaffold, Closure-stylesheets ou less ?

Sommaire : Rédaction de code lessObtenir le css

Comment rédiger votre less ?

Nous rédigons notre less d’une façon assez standard, en s’inspirant des tutoriels suivants :

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 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 :
 * — http://micr0lab.org/ecran.less qui gère l’ensemble du site,
 * — http://micr0lab.org/tech/syntaxh/shThememicr0lab.less qui personnalise syntaxhighlighter,
 * — http://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 à http://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 aside, 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 d’aside et 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.
 */

@url_image:"images/internet/";
@url_sprite:"images/sprite.png?2014_04_06";

/*
 * Fin des chemins.
 */


/*
 * Raccourcis pour extensions propriétaires.
 */

.border-radius (@radius: 8px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.box-shadow-custom (@topleft: 3px, @topright: 3px, @bottomleft: 2px, @bottomright: 2px, @color: @a_nommer ) {
	-webkit-box-shadow: @topleft @topright @bottomright @bottomleft @a_nommer;
	-moz-box-shadow: @topleft @topright @bottomright @bottomleft @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;
	-moz-transition: @prop @temps @effet;
	-o-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, trois solutions : installer node.js, utilisez l’interface simpless ou encore employer lessphp dans votre terminal. C’est cette dernière solution qui est employée ici.

Le fichier css obtenu est enfin compressé à l’aide de CSSTidy avec les options --lowercase_s=true --preserve_css=true --remove_bslash=false --template=highest --timestamp=true. Certaines media-queries sont alors mystérieusement 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 et qui est commenté sur la page consacrée au css.

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/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 à http://micr0lab.org/tech/css/ 
* Infos sur less à http://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 à http://micr0lab.org/rouage/droits/#d_site
* ***************************** */' %e.css

Notez que nous mettons en ligne aussi bien les fichiers .less que les fichiers css, qu’ils soient compressés par tidy ou non, consultez le code source pour en savoir plus.

Contact :

Contact Plan Lettre F.a.q. C.G.U.