article(s) dans votre panier VOIR

Les Mixins pour coder avec le préprocesseur CSS Less

  • Vidéo 13 sur 20
  • 1h20 de formation
  • 20 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Les Mixins
00:00 / 04:42
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
24,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans ce tutoriel en ligne concernant le préprocesseur CSS Less, le formateur vous présente les Mixins du langage Less. Ce tutoriel a pour objectif de savoir les utiliser dans un fichier Less. Pour y parvenir, il faut en premier lieu connaître que le Mixin est une fonction. Cette fonction vous permet d’automatiser les opérations répétitives. Il faut noter qu’un Mixin s’écrit comme une classe. Contrairement à une classe, il n’est pas destiné à être utilisé seul. Il faut savoir également que les Mixins sont définis comme une sous-classe abstraite, c’est-à-dire une classe sans superclasse concrète. Les Mixins vous permettent de définir des modèles paires de valeur de la propriété. Ces modèles peuvent être ensuite réutilisés dans d’autres ensembles de règle. Pour la rédaction de l’instruction, le mot-clé Mixin doit être suivi par le nom mixin et le bloc de déclaration. Cela signifie que ce nom est un sélecteur de classe qui identifie le mixin à être déclaré. L’ensemble d’instructions suivant est un Mixin .bordure {border-top : 4px solid blue ; border-bottom : 4px dotted red}. Celui-ci est inclue ensuite dans le Mixin div#test {width : 400px height : 200px ; .bordure ;}. Pour ce qui est de l’ajouter dans votre fichier HTML, vous saisissez seulement div#test dans votre fichier HTML. Il suffit ensuite d’actualiser votre navigateur pour visualiser le résultat. Pour conclure, vous savez maintenant que le Mixin vous permet de compacter vos codes tout en réduisant la quantité de ligne de code.