L'essentiel de Dreamweaver CC 2017

Utiliser des partials

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
En utilisant des préprocesseurs, vous ne travaillez pas comme en CSS, mais vous pouvez employer tout ce que les CSS ne permettent pas comme les variables, les mixins et les partials. Suivez les instructions et les conseils de votre formateur.
04:54

Transcription

Que l'on utilise less ou que l'on utilise sass, il est important de comprendre qu'on ne va pas développer du css de manière traditionnelle mais on va développer du css au travers d'un préprocesseur. Première chose à faire c'est d'ouvrir la fenêtre de sortie ici parce qu'on va avoir tous les messages d'erreur ou pas d'erreur qui vont pouvoir être pointé à ce niveau-là. Ici je vais avoir un document scss 3. Quand je l'enregistre, hop il apparait ici de l'autre côté. De l'autre côté css document. Un css qui est vide parce que j'ai enregistré automatiquement. Le processeur s'est mis en route, ça a été généré. Y'a rien dedans, il me génère rien. Regardez, il suffit de faire import. Puisque si je travaille en préprocesseur avec l'utilisation de sass, il y a de fortes chances que j'ai opté pour l'option compass ici. Donc si l'option compass a été activée, on peut faire appel à cette librairie. Par exemple compass slash reset. Alors, je ne suis pas en nested, on est en mode expanded au niveau de la génération du css, qui va le rendre lisible humainement parlant. Voilà, la fenêtre de sortie me dit tout s'est bien passé, on a généré le document, je peux l'ouvrir. Vous voyez, j'ai un reset qui est apparu. Donc c'est ce qui est intéressant. On a pas besoin d'aller copier coller récupérer, fabriquer. On peut directement appeler des librairies internes. Prenons un autre document, le 9.04 par exemple. On peut demander de travailler avec variable. Alors variable, vous avez vu il y a uniquement le mot variable écrit. Là il se trouve que j'ai un scss, qui va utiliser underscore variable point scss. Là je fais un import fonction. Fonction, underscore fonction point scss Cela veut dire qu'on travaille avec des partials. Qu'est-ce que les partials ? Cela veut dire préprocesseur écoute ça tu vas le compiler, j'en ai besoin mais tu ne me génères pas de fichier de sortie. C'est juste pour nous, on en a besoin pour fabriquer notre fichier final mais on ne vas pas générer de css pour cela. Ok donc quand on va importer variable tout court, le préprocesseur va venir ici et va se dire est-ce qu'il y a du variable dans l'affaire ? Non. Tu en as un qui commence par underscore ? Oui. Alors tu me le compiles, j'en ai besoin. Mais tu m'en fais pas de css. On le compile dans le fameux sass cache ici. Vous voyez, dans le petit dossier de travail que l'on va utiliser. Ok donc on va aller voir ces fichiers après. Pour l'instant je dis body at include colorise couleur. Waouh. Donc ici je fais un include de colorise. Colorise je sais pas ce que c'est. Couleur je sais pas ce que c'est. Si je viens du côté de variable maintenant, j'ai simplement une variable couleur qui est définie et c'est une sorte de rouge bien pétant. Parfait. J'ai fonction, fonction c'est quoi ? C'est un mixing colorise. Ah c'est là que vient colorise. Mixing colorise, tu vas recevoir un argument. Color dark 1, argument 20%. Donc tu me le feras.. Allez, soyons un peu fou. 40% plus obscur que la couleur que je vais te passer. Donc celle que je vais te passer c'est ce rouge pétant. Ok je vais me le faire en 40%. Parfait. Background color, tu me rends transparent cette couleur à 0.6. Parfait, j'enregistre ça. Donc, ici j'ai fait mon élément. Il me dit ça y est j'ai compilé le 4 pour toi. Ah bon. Tu as compilé le 4, qu'est-ce que tu as fait ? Il m'a fait un body color, ben oui c'est un rouge un peu plus obscur, et ici un rgba et c'est ce rouge un peu transparent. en fait ici, on a que le 4 css qui a été généré c'est-à-dire que ce fichier-là. Le fonction et le variable on les a utilisés pour pouvoir nous aider à fabriquer un fichier final mais aucunement ça a compilé, ça a pollué mon fichier de destination. Ce qui est intéressant de voir, c'est que dès qu'on travaille avec un préprocesseur, sortie ouvert, voire visualiser et éclater ces fichiers css en autant de fichiers qu'on peut avoir besoin. N'hésitez pas à aller à 40,50, 60 fichiers, vous avez une petite fonctionnalité, un petit composant généré un partial par celui-là. Vous allez voir que vous allez vous y retrouver parce que quand vous devez éditer c'est plus facile de venir dans la fonction modifier cette fonction, ou une série de fonctions dédiées à une tâche plutôt que d'aller chercher dans un fichier très verbeux et très long de css pour aller retrouver cette fonctionnalité-là. Donc n'hésitez surtout pas à utiliser des partials, faites des imports qui n'utilisent aucun préfixe ni suffixe. Donc vous allez pouvoir travailler directement avec le coeur du fichier et puis utiliser le maximum de mixing pour pouvoir générer vos contenus. N'hésitez surtout pas à vous rapprocher des librairies de sass, de compass si vous travaillez avec cette technologie-là ou de less pour voir tous les types de mixing que vous pouvez avoir en librairie sur le capot. N'oubliez pas que dans les préprocesseurs, vous avez la possibilité de travailler avec compass mais aussi d'utiliser bourbon, d'utiliser neat et d'utiliser bitters.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 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 !