La partie
fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ?
Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS
pur dans votre code si vous le souhaitez.
Constantes
Tout d’abord, LESS vous permet d’utiliser des constantes. Aux férus de programmation, je n’ai rien à apprendre ; pour les autres, retenez simplement que les constantes seront modifiées par leur contenu à la compilation. Un exemple ? En admettant que vous utilisiez les différentes couleurs dans votre longue feuille de style (palette volée sur
colorjack.com) :
- un bleu électrique (#17B6FF) ;
- un magenta pétant (#FF17B6) ;
- un vert citron (#B6FF17) ;
- un vert acide (#1BFF17).
Si vous décidez de changer une des couleurs de votre palette, vous allez devoir vous battre avec votre éditeur à coups de « rechercher / remplacer ». Ne serait-il pas plus simple de déclarer une constante par couleur ? Avec LESS, vous le pouvez :
Code : CSS | /* Déclaration */
@blue: #17B6FF;
@magenta: #FF17B6;
@lime: #B6FF17;
@green: #1BFF17;
/* Utilisation */
#header { background: @blue; }
#footer { background: @magenta; }
|
LESS générera le CSS suivant :
Code : CSS | #header { background: #17B6FF; }
#footer { background: #FF17B6; }
|
On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés :
Code : CSS | /* Déclaration */
@bg_header: #17B6FF;
@bg_footer: #FF17B6;
/* Utilisation */
#header { background: @bg_header; }
#footer { background: @bg_footer; }
|
Vous pouvez utiliser des variables de différents types (couleurs, dimensions, pourcentages, chaînes de caractères, etc.).
Classes abstraites
Les classes abstraites peuvent être comparées à des fonctions. Expliquons ceci par un exemple (je me permets de reprendre l’exemple d’introduction) :
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | /* Définition de la classe .border-radius */
.border-radius {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Utilisation de .border-radius comme d’une classe abstraite */
#foo {
.border-radius;
/* etc. */
}
/* CSS généré : */
#foo {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* etc. */
}
|
Sur un élément, cette transformation peut paraître triviale, mais si vous devez appliquer des bordures arrondies sur 50 éléments, croyez-moi, LESS va vous servir. Cet exemple n’est cependant pas parfait : la valeur 10px est stockée en dur dans notre classe abstraite. Et si nous transmettions des paramètres à notre classe abstraite ?
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | /* Définition de la classe .border-radius avec un paramètre */
.border-radius(@radius) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/* Utilisation de .border-radius comme une classe abstraite */
#foo {
.border-radius(10px);
/* etc. */
}
/* CSS généré : */
#foo {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* etc. */
}
|
Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules.
Enfin, LESS permet aussi d’utiliser des valeurs par défaut pour les paramètres :
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 | /* Définition de la classe .border-radius avec un paramètre optionnel */
.border-radius(@radius: 10px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/* Utilisation de .border-radius comme une classe abstraite */
#foo {
.border-radius(10px);
/* – ou bien – */
.border-radius;
/* etc. */
}
/* CSS généré : */
#foo {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* etc. */
}
|
Il existe une constante dans chaque classe abstraite paramétrable, appelée
@arguments, et qui contient l’intégralité des paramètres passés à la classe.
Les classes abstraites, comme les constantes, sont très puissantes et vous permettent de minimiser votre feuille de style à moindre coût, et donc de faciliter sa maintenance.
Imbrication
LESS vous autorise à simplifier votre feuille de style en imbriquant vos sélecteurs, comme vous le feriez avec vos balises HTML. Voici un exemple :
Code : CSS | /* LESS */
#foo {
background: lemon;
bar { color: lightblue; }
baz { color: orange; }
}
/* CSS généré */
#foo { background: lemon; }
#foo bar { color: lightblue; }
#foo baz { color: orange; }
|
J’imagine que vous n’avez pas besoin d’explications supplémentaires. Un détail cependant : vous pouvez utiliser le symbole
& comme vous utiliseriez
this dans un autre langage. Cette comparaison n’est pas très claire, voici donc un exemple :
Code : CSS | /* LESS */
#foo {
background: lightgrey;
&:hover { color: orange; }
}
/* CSS généré */
#foo { background: lightgrey; }
#foo:hover { color: orange; }
|
Opérations
LESS est capable d’effectuer des opérations. C’est
très pratique, puisque vous gagnez du temps encore une fois. Exemple :
Code : CSS | @size_image: 100px;
.box {
width: @size_image + 10px;
height: @size_image + 10px;
img {
width: @size_image;
height: @size_image;
}
}
|
Dans cet exemple, nous aurions pu utiliser un
margin, il est vrai. Mais vous n’êtes pas limités aux opérations sur les dimensions !
Code : CSS | @bg_body: #555;
@bg_header: @bg_body + #666;
/* @bg_header vaut maintenant #BBB ! */
|
Vous
pouvez utiliser les parenthèses pour spécifier les priorités dans des opérations complexes, et
devez les utiliser quand elles sont conjointes à d’autres paramètres :
Code : CSS | #header { width: @width - (@space * 2 + @foo); }
#footer { border: (@space / 2) solid orange; }
|
Fonctions
LESS propose pour l’instant une dizaine de fonctions pour interagir avec les couleurs. Il n’est
pas possible de définir vos propres fonctions à l’heure actuelle. Ces fonctions sont les suivantes :
| Fonction |
Description |
Exemple |
| lighten(@c, @x) |
Éclaircit |
lighten(#AAA, 42%) |
| darken(@c, @x) |
Assombrit |
darken(lightblue, 3.14%) |
| saturate(@c, @x) |
Sature |
saturate(#123456, 10%) |
| desaturate(@c, @x) |
Désature |
desaturate(#567, 50%) |
| fadein(@c, @x) |
Rend transparent |
fadein(blue, 30%) |
| fadeout(@c, @x) |
Opacifie |
fadeout(rgba(123, 213, 231, 132), 30%) |
| spin(@c, @x) |
Change la teinte de @x degrés |
spin(red, 30) |
| hue(@c) |
Retourne la teinte |
hue(#345) |
| saturation(@c) |
Retourne la saturation |
saturation(lightblue) |
| lightness(@c) |
Retourne la luminosité |
lightness(darkgrey) |
Commentaires
LESS vous permet d’écrire vos commentaires à la sauce C++, avec le double
slash :
Code : C++ | /* Je suis un commentaire CSS */
// Je suis un commentaire LESS
|
N.B. : j’utilise la coloration C++ dans l’exemple ci-dessus, mais il s’agit bien de LESS.
Il est à noter que si les commentaires CSS sont bien visibles dans vos sources CSS interprétées, ce n’est pas le cas des commentaires LESS. Le CSS généré de l’exemple précédent sera donc :
Code : CSS | /* Je suis un commentaire CSS */
|
Inclusions
LESS vous permet de séparer votre code en plusieurs fichiers pour n’en obtenir qu’un au final. C’est l’équivalent d’un
#include en C. Vous pouvez inclure des fichiers
.less (l’extension est alors optionnelle) ou
.css. Attention cependant : dans ce dernier cas, le contenu des fichiers ne sera pas interprété.
Code : CSS | /* Importation de style LESS */
@import 'style.less'
/* – ou bien – */
@import 'style'
/* Importation de CSS (non interprété) */
@import 'style.css'
|
Simplifiez-vous la vie avec LESS
Durée d'étude :
1
heure,
50
minutes
Masterdevil
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook
Google+