Simplifiez votre CSS avec LESS

Si vous faites un peu de web moderne vous avez forcément utilisé ou vu des des feuilles de style au format CSS. L’acronyme CSS signifie dans la langue de Shakespeare : Cascading Style Sheet, soit en français : feuille de style en cascade. Ce sont ces fichiers qui permettent de définir la mise en page, les couleurs et les formes d’un site web. Il faut avant tout sélectionner un élément de la page, puis lui appliquer le style désiré, exemple ci-dessous.

/* Corp de la page */
    background-color: #A00; /* Font de page en rouge */
}
body header {
    background-color: # A00; /* Font de l&rsquo;ent&ecirc;te en rouge */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px; /* Coins arrondis */
}
body h2 {
    background-color: # F00; /* Font du titre en rouge plus clair */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px; /* Coins arrondis */
}

On voit clairement dès maintenant que certains paramètres tels que la couleur et les coins arrondis se répètent et qu’il serait possible de les regrouper dans un seul élément commun plutôt que de les écrire deux fois. Ceci est absolument impossible en CSS, ce qui résultera en un fichier lourd, peut simple à maintenir et à faire évoluer.

Il existe aujourd’hui plusieurs langages de programmation qui viennent étendre le CSS de manière à rendre le style de votre page plus simple à mettre à jour et à faire évoluer. Un de ces langages se nomme LESS et peut-être transformé en CSS côté serveur comme côté client.

La syntaxe est selon moi beaucoup plus simple et naturelle et vous permet de réaliser des opérations arithmétiques, de créer des variables, de préparer des templates CSS ou encore de créer des fonctions. La feuille de style précédente pourrait alors s’écrire sous la forme suivante :

@red = #A00 ; // d&eacute;finition d&rsquo;une variable pour la couleur

.border-radius (@radius) { // d&eacute;finition d&rsquo;un template pour les coins arrondis
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius; 
}

body {
    background-color : @red ;
    header {
        background-color : @red ;
        .border-radius (5px) ;
    }
    h2 {
        background-color : saturate(@red, 100%) ; //Utilisation d&rsquo;une fonction pour saturer la couleur
        .border-radius (5px) ;
    }
}

Il est ensuite possible de transformer ce code en CSS en utilisant le compilateur Lessc sur votre machine Linux de cette manière :

sudo apt-get install node-less yui-compressor
lessc test.less &gt; test.css
yui-compressor -o small_test.css test.css

Ou en le définissant directement dans une page HTML avec script de compilation JavaScript pouvant être trouvé à cette adresse : https://github.com/less/less.js. Il suffit donc ensuite d’intégrer votre feuille de style LESS dans votre site et de charger le script less.js comme suit :

<head>
    <link rel=”stylesheet/less” type=”text/css” href=”styles.less” />
    <script src=”less.js” type=”text/javascript”></script>
</head>

Vous pouvez retrouver toutes la documentation sur le langage à cette adresse : http://lesscss.org. Il est aussi possible de récupérer les codes source de LESS et de participer à son développement, via GitHub : https://github.com/less/less.js.

Image : exeypanteleev

Simplifiez votre CSS avec LESS #

Simplifiez votre CSS avec LESS