L'essentiel de Sass

Progresser avec Sass

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour aller plus loin avec Sass, votre formateur vous donne quelques conseils et quelques précisions supplémentaires.

Transcription

Voilà, mon site est à présent terminé, vous voyez que ma page est habillée de la tête aux pieds elle est même réactive, cette page, puisque quand je modifie la largeur de la fenêtre de mon navigateur, vous voyez que j'ai ici des points d'arrêts, et puis dans le point d'arrêt le plus petit, ma page devient complètement fluide, puisqu'elle a une largeur de 100%. Dans le point d'arrêt le plus étroit, j'ai également ce petit comportement JavaScript qui fait apparaître et disparaître mon Menu, ça, on n'en a pas vraiment parlé dans ce cours, ce n'était pas l'objet, mais les fichiers JavaScrip qui régissent ce comporterment font partie des fichiers d'exercices associés à cette formation donc, n'hésitez surtout pas à les inspecter pour voir comment nous avons réalisé ceci. Alors, au niveau de l'application, ça s'entend que telle, je vais retourner dans Dreamweaver pour vous montrer tout ça. Voyez que j'ai plein de partielles en plus ici, alors, avant de se quitter je vais vous montrer deux, trois petites choses, notamment ici, dans les mixins. Alors, j'ai ici une mixin qui est tout à fait courante dans beaucoup d'applications Sass je l'ai appelée « gradient » elle me permet de faire des dégradés. Alors , elle prend deux paramètres, un paramètre que j'ai appelé « from », un paramètre que j'ai appelé « to ». Ces deux paramètres, ce sont tout simplement les deux couleurs que l'on va mélanger pour créer ce dégradé. Et puis la mixin, elle va tout simplement créer différentes versions de mon dégradé vous le voyez ici avec les préfixes de navigateur pour les différents navigateurs et puis, également une version spéciale pour Microsoft avec la propriété Filter. Alors, ça s'adresse aux anciennes versions d'Intenet Explorer, vous le voyez ici, qui ne comprenait pas la syntaxe officielle du CSS avec « Linear gradient » et qui avait besoin de ce Filter propre à Microsoft. Ma mixin prend tout ça en charge. Comment est-ce que je l'utilise maintenant, cette mixin ? Au niveau du Footer, c'est là que je l'utilise. Alors, c'est un petit peu plus bas, voilà, c'est ici, regardez, c'est tout [inaudible]. Je vais tout simplement appeler ma mixin« gradient » et puis, je lui passe les deux couleurs que j'ai envie d'utiliser pour mon dégradé. Je l'utilise ici également et là vous voyez que j'ai simplement inversé les deux couleurs pour créer mon effet de releveur sur cet élément, alors, sur la page web ça correspond au petit bouton site mobile qui se trouve ici dans le fond, vous voyez, quand je passe dessus, j'inverse tout simplement mon dégradé. Autre chose que je vais vous montrer dans Dreamweaver ça se trouve dans le fichier « Fonctions » qui se trouve ici. Mais je me suis fais une petite fonction que j'ai appelée « radiusValue » et cette fonction, elle utilise des mots-clés, donc « left » si je veux des coins arrondis à gauche de l'élément, « top » si je le veux au-dessus, « right » à droite, « bottom » en-dessous. Et comment j'utilise cette fonction ? Regardez dans « bottom.scss » , regardez comme c'est facile « border-radius » à gauche. « border-radius » à droite. C'est ma mixin « border-radius » qui appelle cette fonction « radiusValue » et c'est elle qui fait tout le boulot et qui me crée ces différentes valeurs . Et donc j'ai ici un mot-clé, c'est un petit peu confort, que je me donne dans mon application de pouvoir comme ça mettre simplement des coins arrondis au-dessus, en-dessous, à gauche ou à droite de mes éléments.

L'essentiel de Sass

Abordez et intégrez Sass dans votre flux de travail. Découvrez les options pour compiler votre code Sass en CSS, passez en revue les mécanismes pour le réutiliser, etc.

2h59 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sass Sass 3.4.22
Spécial abonnés
Date de parution :25 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !