Optimisation du code CSS avec LESS

Étendre des objets déjà créés
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser le préprocesseur CSS : LESS
Revoir le teaser Je m'abonne
Transcription

34,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

34,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

À la fin de cette vidéo, vous serez capable d'utiliser la fonctionnalité extend de LESS pour optimiser et réutiliser vos styles CSS.

Découvrez comment utiliser la fonctionnalité extend de LESS pour réutiliser et optimiser des objets CSS.

Dans cette leçon, nous explorons la fonctionnalité extend de LESS, un préprocesseur CSS populaire. Cette technique permet de réutiliser des styles existants en les étendant à de nouveaux éléments. Nous allons créer une classe appelée boîte1 avec des propriétés spécifiques, telles que la hauteur, la largeur et la couleur de fond. Ensuite, en utilisant la syntaxe &:extend(.boîte1);, nous verrons comment ces propriétés peuvent être héritées et modifiées par une nouvelle classe appelée boîte2. Cette approche facilite non seulement la gestion du code, mais permet également d'apporter des modifications globales rapidement et efficacement. Par exemple, il devient très simple de changer la hauteur générale des boîtes ou de redéfinir des propriétés spécifiques comme la couleur de fond directement dans les nouvelles classes. Nous aborderons également différentes manières d'écrire l'extension pour garantir une flexibilité maximale dans l'écriture de votre code LESS.

Voir plus
Questions réponses
Quelles sont les propriétés définies dans la classe boîte1 ?
Les propriétés définies dans la classe boîte1 sont la hauteur, la largeur, la couleur de fond et le padding.
Comment la classe boîte2 hérite-t-elle des propriétés de boîte1 ?
La classe boîte2 hérite des propriétés de boîte1 en utilisant la syntaxe: &:extend(.boîte1);.
Quels sont les avantages d'utiliser extend en LESS ?
L'utilisation de extend en LESS permet de gagner de la place, d'organiser le code plus efficacement, et de faciliter les modifications globales des propriétés CSS.