0

Les préprocesseurs CSS

C’est au tour des préprocesseurs de passer le test de l’ami du développeur !

Je vais vous expliquer un peu le concept et ensuite vous présenter LESS un des préprocesseurs les plus connus !

Les préprocesseurs CSS, pourquoi ne pas y avoir pensé auparavant ?

Tout bon intégrateur sait à quel point l’indentation dans un fichier CSS est importante. En effet on est vite perdu dans toutes nos div. Un autre point tout aussi important est la répétition de certaine propriété. (Ex : float:left; clear:both; width:100%;).

C’est donc posé la question d’une dynamisation du CSS. En php, javascript ou autre langage dynamique on peut définir nos variables en début de script et les utiliser tout du long. Pourquoi ne pas faire la même chose avec le CSS ? C’est ainsi que sont nés les préprocesseurs.

Présentation et installation d’un préprocesseur CSS : LESS

J’ai décidé de vous illustrer toutes ces belles paroles par un exemple concret, l’utilisation de LESS. C’est le préprocesseur dont j’ai l’utilité la plus courante, voila pourquoi je l’ai choisi.

Rentrons dans le vif du sujet.

Désormais, vous n’allez plus écrire des feuilles CSS mais des feuilles LESS. Vous allez me dire « Ok très bien mais comment le navigateur va interpréter tout cela ? » Et bien c’est assez simple, il existe pour cela deux techniques. Soit-il faut faire la conversion du fichier LESS en CSS  côté SERVEUR ou bien la faire directement côté CLIENT. J’opte en permanence pour la seconde solution et vous allez comprendre pourquoi.

Déclaration d’un fichier LESS sur votre site :

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Le fichier est donc lié à votre site mais l’extension LESS n’est pas encore comprise par le navigateur. Pour se faire on va utiliser un simple script JS que l’on charge juste après :

<script src="less.js" type="text/javascript"></script>

C’est ce script qui va se charger de compiler tout cela et rendre l’utilisation de LESS possible. Vous pouvez passer certains paramètres juste avant le chargement du script.

<script type="text/javascript">
    less = {
        env: "development", // or "production"
        async: false,       // load imports async
        fileAsync: false,   // load imports async when in a page under
                            // a file protocol
        poll: 1000,         // when in watch mode, time in ms between polls
        functions: {},      // user functions, keyed by name
        dumpLineNumbers: "comments", // or "mediaQuery" or "all"
        relativeUrls: false,// whether to adjust url's to be relative
                            // if false, url's are already relative to the
                            // entry less file
        rootpath: ":/a.com/"// a path to add on to the start of every url
                            //resource
    };
</script>

Utilisation d’un préprocesseur : LESS

Bon voilà tout est en place. Maintenant on met quoi dans le fichier LESS ? Et bien on peut mettre du CSS ou bien exploiter la puissance du script. Voici quelques exemples :

1 – Les variables

Comme je l’ai expliqué auparavant on peut déclarer des variables. Au tout début de votre script vous pouvez stocker les valeurs qui vont se répéter le plus souvent (couleurs, tailles, marges). L’avantage est que l’on ne cherchera plus pendant l’écriture du CSS les bonnes valeurs et si l’on souhaite modifier tout cela en une demie-seconde le tour est joué.

Exemple :


@couleur_titre: #ff55f6;
@marge: 5px;
@col1 : 600px;

h1{
    width:@col1;
    margin:@marge
}

Voila votre h1 aura donc la couleur #ff55f6 et des marges de 5px.

2 – L’indentation et la hiérarchisation

Avant on écrivait cela :


#header{ width:500px; }

#header #logo{ float:left; }

#header #logo a{ text-decoration: none; }

Désormais avec LESS vous pouvez écrire de cette manière :


#header{

    width: 500px;

    #logo{

        float: left;

        a{ text-decoration: none}

    }

}

On emboîte en quelques sortes les sélecteurs en fonction de leurs parentés. Plus besoin d’écrire tout le fil à chaque fois, la compilation s’en chargera pour nous.

3 – Les mixins

J’expliquais un peu plus haut qu’il arrive parfois d’avoir des propriétés identiques entre plusieurs sélecteurs. A l’instar des variables, les mixins vont nous permettre d’étendre des sélecteurs entre eux :

.clear{
  float : left;
  display: block;
  font-size:12px;
}

De ce fait, plus besoin de récrire les propriétés on va étendre tout simplement la class ‘.clear’ sur nos autres sélecteurs :

#header{
  .clear
  color:#000;
}
#menu{
  .clear
  color:#222;
}

Vous avez même la possibilité de passer un ou plusieurs paramètres dans vos mixins :

.clear(@taille){
  float : left;
  display: block;
  font-size: @taille;
}

 

#header{
  .clear(12px);
  color:#000;
}

C’est assez pratique il faut prendre l’habitude mais on peut y gagner un temps précieux :) !

Vous allez pouvoir gérer des média queries, créer des fonctions qui vont ajouter les tailles, mixer plusieurs couleurs,  utiliser des propriétés d’une classe comprise dans une autre (les namespaces).

Je ne vais pas vous faire un Copier/Coller du site de LESS mais juste pour vous le présenter, si vous souhaitez l’utiliser la documentation est parfaite pour cela  : http://lesscss.org/#docs

Les autres préprocesseurs

Il existe bien d’autres préprocesseurs en voici une petite liste non exhaustive :

SASS

Stylus

Google closure Stylesheet

Le principe est un peu différent mais les fonctionnalités restent les mêmes.

Et vous, vous utilisez quel préprocesseur ?

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.