Application d'un bloc de code pour les pseudo-classes en LESS
Créons une fonction qui définira
les styles d'un lien dans l'état hover.
Laissons cette fonction accepter un bloc de code comme paramètre :
.hover(@code) {
}
Affichons le bloc de code passé à l'intérieur
de l'état hover :
.hover(@code) {
&:hover {
@code();
}
}
Utilisons notre fonction à l'intérieur d'un lien :
a {
color: red;
.hover({
color: blue;
text-decoration: none;
});
}
Résultat de la compilation :
a {
color: red;
}
a:hover {
color: blue;
text-decoration: none;
}
Créez une fonction similaire qui
définira les styles pour un champ de saisie dans l'état focus.
