Utilisation des Gardes pour les Styles Dynamiques
Objectifs
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.
Résumé
Découvrez comment LESS permet d'utiliser des gardes pour ajuster les styles CSS en fonction des conditions, évitant ainsi les conflits de couleurs.
Description
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.
Questions - réponses
Programme détaillé
Module 1 - L'environnement de travail de Less
Module 2 - Les bases du langage Less
Module 3 - Techniques avancées du langage Less
