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

Comprendre les Gardes en LESS

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

Découvrez comment LESS permet d'utiliser des gardes pour ajuster les styles CSS en fonction des conditions, évitant ainsi les conflits de couleurs.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer les gardes en LESS. Les gardes permettent de définir des conditions spécifiques pour appliquer certains styles. Par exemple, vous pouvez ajuster la couleur de fond en fonction de la couleur du texte, évitant ainsi des combinaisons de couleurs inappropriées comme du texte noir sur un fond noir.

Nous commencerons par définir un mixin appelé thème, en utilisant la variable mode, à laquelle nous appliquerons des conditions avec le mot clé WHEN. Si mode est égal à foncé, la couleur de fond sera un gris très foncé. Si mode est égal à clair, la couleur de fond sera claire, comme un rose.

Le processus sera démontré en appliquant le mixin à une div avec différentes valeurs pour le mode et en observant les changements de couleur de fond en temps réel.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Introduire les gardes en LESS.
  • Montrer comment utiliser des conditions pour ajuster dynamiquement les styles CSS.
  • Éviter les conflits de couleurs lors de la définition des thèmes CSS.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en CSS, HTML et LESS.

Métiers concernés

Les concepts abordés dans cette vidéo peuvent être appliqués dans les métiers suivants :

  • Développeur Front-end
  • Designer Web
  • Intégrateur Web

Alternatives et ressources

Des alternatives à LESS incluent :

  • Sass (Syntactically Awesome Stylesheets)
  • Stylus
  • PostCSS

Questions & Réponses

Un garde en LESS est une condition permettant d'appliquer des styles CSS spécifiques uniquement lorsque certaines conditions sont remplies.
Le mot clé WHEN est utilisé dans LESS pour définir des conditions dans les mixins. Il permet d'exécuter un bloc de styles CSS uniquement si la condition donnée est vraie.
Les gardes en LESS sont utilisés pour ajuster dynamiquement les styles CSS, évitant ainsi les conflits de styles tels que des couleurs de texte et de fond similaires, et permettant une plus grande flexibilité dans la gestion des thèmes.