Étendre les objets CSS existants avec LESS
Objectifs
À la fin de cette vidéo, vous serez capable d'utiliser la fonctionnalité extend de LESS pour optimiser et réutiliser vos styles CSS.
Résumé
Découvrez comment utiliser la fonctionnalité extend de LESS pour réutiliser et optimiser des objets CSS.
Description
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.