Le nombre de framework ou d'outils naissant pour les langages comme Javascript, PHP et bien d'autres est assez impressionnant. Un langage mis de côté était le CSS. Et bien Alexis Sellier ne l'a pas épargné et a créé un outil qui permet de rendre votre CSS dynamique.
Ce que permet de faire Less CSS est en fait assez simple : il permet d'ajouter des variables, des opérations, des "mixins" et des règles imbriquées à votre CSS.
Les variables et opérations
Les variables et les opérations fonctionnent comme dans tout langage de programmation. On définit une variable qui comporte une valeur, qui peut-être un nombre de pixel ou une couleur par exemple, qu'on pourra réattribuer par la suite. Et on peut effectuer les opérations basiques par dessus (addition, soustraction ...).
Avec Less CSS :
@color: #111111;
@color2: @color + #111111 * 2;
#header { color: @color2; }
Sans Less CSS :
#header { color:#444444;}
Les règles imbriquées
Les règles imbriquées permettent ... d'imbriquer vos règles css. Plutôt que devoir répéter l'inclusion de vos éléments, vous pouvez inclure vos balises dans les balises parentes, sans devoir les réécrire. Ce sera plus clair avec un exemple :
Avec Less CSS :
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Sans Less CSS :
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Les mixins
Les mixins permettent de récupérer les propriétés d'éléments déjà configurés, pour les réutiliser par la suite. Et ils vous permettent aussi de passer des valeurs en paramètres.
On donne des attributs à une classe :
.bordered (@type, @size, @color) {
border-top: @type @size @color;
border-bottom: @type @size+1 @color;
}
On réutilise ces propriétés pour un autre élément :
#menu a {
color: #111;
.bordered(solid, 5px, #CCCCCC);
}
.post a {
color: red;
.bordered(dotted,10px,#FF6600;
}
Je vais utiliser ce framework pour mon prochain projet que je commence aujourd'hui. Je vais donc peut-être être amené à apporter des modifications avec plus de connaissances :)
EDIT :
Après avoir un peu galéré à l'installer je vais vous éviter ce temps perdu. Il faut que vous soyez bien sur un serveur, même local, et que vous mettiez bien l'extension .less. Vérifiez donc bien dans les informations du fichier que c'est bien cette extension.
Et une surprise de taille : Less CSS vous indique les erreurs directement dans la page !!!!
