CATALOGUE Code & Data Formation XHTML/CSS Maîtriser le préprocesseur CSS : LESS

Optimisation du code CSS avec LESS

Retour à la formation
Chapitre 3 Leçon 3
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les techniques abordées sont particulièrement utiles pour les développeurs front-end, mais aussi pour les web designers et intégrateurs web.

Alternatives et ressources

Bien que LESS soit un excellent choix, vous pouvez aussi utiliser Sass ou Stylus pour des fonctionnalités similaires.

Questions & Réponses

Les propriétés définies dans la classe boîte1 sont la hauteur, la largeur, la couleur de fond et le padding.
La classe boîte2 hérite des propriétés de boîte1 en utilisant la syntaxe: &:extend(.boîte1);.
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.