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, KNACSS 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 :
 * — 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?2014_04_06";

/*
 * 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.
 */

.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

Avec lessphp

Le logiciel (en tout cas, la version employée) 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 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 à 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é, 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.

Contact :

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