article(s) dans votre panier VOIR

Comprendre les fonctions des mixins du préprocesseur CSS SASS et Compass

  • Vidéo 10 sur 14
  • 1h33 de formation
  • 14 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
Mixins sass et compass, comprendre les fonctions
00:00 / 05:57
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 SASS, le formateur Jean Bernard André vous explique les fonctionnements des Mixins SASS et Compass. Cette vidéo a pour objectif de pouvoir automatiser vos codes à partir d’un exemple. Pour y parvenir, il faut tout d’abord que les Mixins soient des fonctions. Comme les propriétés de CSS 3 ne sont pas implémentées de la même façon selon les navigateurs, il est donc nécessaire d’utiliser des préfixes vendeurs. Pour automatiser l’utilisation de ces préfixes vendeurs, vous avez besoin d’un Mixin. Concernant la création de Mixin, vous utilisez le mot-clé @mixin pour ensuite indiquer son nom. En n’oubliant pas également de lui attribuer un argument. Dans le cas précédent, l’instruction est @mixin border-radius ($radius) puis ,vous saisissez {border-radius : $radius ; }. Cela fait, vous dupliquez ce code quatre fois et ajoutez les préfixes vendeurs. Par ailleurs, vous devez déclarer ces Mixins dans la page mère. Pour cela, vous inscrivez le code @import « partials /mixin ». Après cela, vous mettez en place un fichier Header pour ensuite lui donner une marge, une couleur de fond et une hauteur. Ainsi fait, in ne vous reste plus qu’à intégrer le Mixin border-radius dans votre Header. Pour effectuer cela, vous utilisez @include border-radius ($radius). $radius quant à lui, correspond à une valeur. Pour conclure, vous savez maintenant comment utiliser les Mixins.