Framework CSS : Less, Compass, SASS

Août 2013

Les framework CSS permettent de gérer ses feuilles de style beaucoup plus efficacement en évitant de dupliquer du code.

Le langage CSS (utilisé pour mettre en page une page web HTML) est assez limité au niveau de sa syntaxe. En effet, une feuille de style n'est rien d'autre qu'une succession de sélecteurs CSS auxquels on attribue des propriétés CSS comme la couleur de fond, les marges ou la police de caractère. CSS est un langage déclaratif plus qu'un réel langage de programmation, il n'est par exemple pas possible de créer une variable en CSS.

C'est dans ce contexte que sont apparus plusieurs solutions visant à rendre le CSS flux flexible et plus productif, ce sont les framework CSS. Il en existe plusieurs, voici les principaux :

LESS CSS

LESS CSS (http://lesscss.org/) est le framework CSS le plus populaire, il est utilisé par nombre de projets et notamment par le bootstrap de twitter. Pour résumer, LESS ajouter ces fonctionnalités au langage CSS :

Variable CSS
C'est très utile pour déclarer une couleur par exemple. En général le webdesign d'un site internet utilise un jeu de couleurs très limité, qui revient souvent. Si on souhaite changer le thème coloriel, il faut mettre à jour toutes les occurrences de cette couleur, ce qui est long est fastidieux. Grâce à LESS, il suffit de définir une variable pour chaque couleur, et ensuite de référencer cette variable dans les propriétés CSS.
Exemple :
```
/* Déclaration d'une variable couleur */
@color: #e7e7e7;

/* Utilisation de la variable */
div#header  {background-color: @color;}
#content h1 {color: @color;}
```

Mixins
Elles permettent de réutiliser des blocs de règles prédéfinis. On peut par exemple s'en servir pour gérer les coins arrondis avec border-radius, sans devoir se palucher toutes les règles CSS avec les préfixes navigateur (-webkit, -moz...).
Exemple :

.coins-arrondis (@radius: 10px){
	-webkit-border-radius: @radius;
	   -moz-border-radius: @radius;
	    -ms-border-radius: @radius;
	     -o-border-radius: @radius;
	        border-radius: @radius;
}

div#header{
	.coins-arrondis;
}

#content h1{
	.coins-arrondis(20px);
}

Règles imbriquées
Comme son nom l'indique, cette fonctionnalité sert à imbriquer des sélecteurs pour éviter d'avoir des préfixes à rallonge.
Opération CSS
Il devient possible d'utiliser des opérateurs arithmétiques en CSS pour donner une valeur relative à une propriété. On peut par exemple définir que la largeur de la bordure de tel élément est le triple de la largeur de la bordure de tel autre élément, ou de telle variable.
Fonction CSS
Il s'agit d'un ensemble de fonctions utiles ajoutées par LESS et qui sert par exemple à modifier à la volée la saturation d'une couleur (et donc d'avoir une couleur relative à une autre), comme pour changer la couleur d'arrière-plan d'un bouton au survol en CSS.

Comment fonctionne LESS ?

LESS fonctionne à l'aide d'un fichier Javascript less.js qui transforme le code LESS en code CSS natif au chargement de la page. Comme vous pouvez vous en douter, cela peut potentiellement ralentir légèrement le temps de chargement des pages car le navigateur doit exécuter le code less.js pour générer le rendu de la page.

C'est pour cette raison qu'il existe aussi un compilateur less (lessc) qui permet de générer le CSS natif côté serveur. Dans ce cas rassurez-vous, ça n'augmentera pas la charge du serveur, puisque la feuille de style doit être recompilée à chaque modification des sources (fichier .less). En général il vaut mieux utiliser cette seconde solution, elle est plus propre bien qu'elle soit aussi plus fastidieuse (surtout lors du développement) puisqu'il faut penser à recompiler à chaque modification. De plus, le compilateur (programme lessc) ne fonctionne que sur Unix (linux et Mac OS), et pas sous windows.

SimpLESS

Ne partez pas, les inconvénients dont je vous parlais ci-dessus n'en sont pas, car il existe une application très utile qui s'appelle SimpLESS et qui est absolument géniale !

La page du jour est additionner des cellules avec une formule excel, bonne lecture.

SimpLESS est un petit logiciel pour Windows et Mac OS qui recompile automatiquement dès que vous modifiez les sources LESS, comme ça le fichier CSS est toujours à jour et vous n'avez plus à vous soucier vous même de la compilation.

Vous pouvez le télécharger sur le site officiel : http://wearekiss.com/simpless.

SASS

SASS (Syntactically Awesome Stylesheets) est l'ancêtre de LESS, il fonctionne de la même manière que LESS : c'est un précompilateur CSS. Voici le site officiel si ça vous intéresse : http://sass-lang.com/.

Compass

Compass apporte les mêmes fonctionnalités que LESS, et même plus, mais il est plus complexe à utiliser car il ne dispose pas de compilateur à la volée côté client (comme less.js), on est obligé de compiler le CSS en ligne de commande, ce qui n'est pas très pratique comme évoqué plus haut à propos de lessc. Site officiel : http://compass-style.org/.

Stylus CSS

Je ne connais que de nom, ce framework est beaucoup moins populaire que les 3 autres. Site officiel : http://learnboost.github.io/stylus/.

Fini de lire cette page ? allez faire un tour ici : slow motion à la matrix, ça peut vous intéresser.

Fil de lecture

0 commentaire