L'essentiel de Dreamweaver CC 2017

Produire en LESS ou en Sass

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Prenez quelques instants pour vérifier et adapter au besoin l'installation précédente. Ensuite, vous passerez à la production en mettant en commun les deux technologies.
07:15

Transcription

L'installation générale, principalement pour sass a été mise en place et un certain nombre de dossiers ont été générés. Le premier dossier, sass cache, n'est pas nécessaire dans notre utilisation globale. Mais il va être utilisé par sass pour pouvoir optimiser le temps de calculation sur la génération des css. Si vous ouvrez le dossier css théoriquement il doit être vide au départ. Mais il se peut qu'une 1ère calculation ait été générée parce que par défaut, Compass installe 3 fichiers scss qui sont iescss, print scss et screen css. Le ie est un document qui vous demande dans sa ligne de commentaires de pouvoir installer ce commentaire conditionnel dans votre fichier html afin d'activer cette feuille de style pour être pris en compte pour le navigateur internet explorer uniquement. Faites attention, une erreur est générée à l'int"rieur c'est que par défaut il le génère sur stylesheets alors qu'il devrait le générer sur css ici vous voyez puisque si on regarde dans le config.rb, on a demandé de faire tout à l'heure un css. Dans le défaut, stylesheets, ça a été installé donc c'st une petite erreur donc je vous invite à venir corriger cette erreur ici et de fire css ici. Bien entendu, ce dossier stylesheets va être complètement inutile par la suite et va pouvoir être supprimé. Si vous souhaitez garder ces dossiers, vous pouvez les garder mais si vous souhaitez les supprimer, vous pouvez les jeter sans souci ce sont des fichiers basiques, de départ, qui ont été mis en place. On peut par la même jeter le dossier stylesheets ici qui a été installé par, presque, défaut. Donc ensuite on vérifie dans le config.rb que tout le reste de la configuration que nous avions donné reste bon. Ici nous avions demandé le dossier img et on se retrouve avec le dossier image donc c'est pas quelque chose de correct donc ce qu'on va faire c'est installer le dossier img ici et si je regarde bien le dossier javascript que nous avions appelé javascript tout court s'appelle javascripts au pluriel on peut venir le renommer pour javascript. VVoilà ce sont quelques petites erreurs d'installation qui peuvent arriver en fonction de vos configurations machine. C'est pas bien grave mais voilà le genre de fonctionnalité qu'il va falloir, d'entrée de jeu, vérifier pour s'en assurer. Deuxième chose maintenant, si vous venez dans la partie préprocesseur et que vous regardez du côté de Compass, vous verrez que l'option manuelle que vous aviez configuré au départ n'est plus activée puisque maintenant il y a un fichier config.rb. On va pointer vers ce fichier config.rb et donc les modifications qu'on a faites sont intégralement prises en compte. cette partie-là sert uniquement lors de l'installation des fichiers et on a vu que ça pouvait causer quelques petits soucis à ce niveau. Si vous voulez activer le webfonts qui n'a pas été pris en compte, vous pouvez venir ici regarder. Vous avez l'intégralité des commentaires que vous allez pouvoir d'une part dé-commenter. Par exemple ici le line comment il était false donc c'était très bien mais ici au niveau du output syle par exemple, on avait demandé d'avoir un expanded donc vous pouvez récupérer cete partie-là, Ctrl C, et venir faire un Ctrl V ici et faire un Ctrl S juste après pour être en mode expanded de ce niveau-là. Vous pouvez aller beaucoup plus loin. Avant d'aller plus loin ici dans la configuration, pour aller plus loin dans l'exploitation, je vous conseille d'aller explorer quelques sites. Par défaut, le site de less sur lequel vous allez avoir toutes les explications justement sur math strict, math et strict units. Il vous suffit de faire un Ctrl S et de venir sur les units ici. Donc vous allez pouvoir voir toutes les informations que vous cherchez et pour quelles raisons. Ici vous avez le strict math et pourquoi ou comment les utiliser. Ensuite, je vous conseille de vous rapprocher de sass référence. Vous avez une excellente documentation sur la partie droite. C'est interactif et ça va vous permettre d'optimiser l'utilisation de sass. Pour la partie de compass venez directement sur le site de compass et vous pourrez aller dans le help documentation ou le code référence qui sont des mines d'information où vous allez pouvoir venir puiser et rechercher les différents mixing que vous avez. Justement nous en parlions au niveau de la configuration, pour le config.rb vous avez toutes les petites variables et toutes les petites astuces de chemin que vous allez pouvoir utiliser quelque soit les besoins que ce soit pour des images generated, pour les http, les fonts eccetera c'est ici que vous trouverez toutes les variables et les valeurs qu'elles peuvent récupérer. Vous avez un site sur bourbon qui vous permet de comprendre la librairie bourbon et bourbon neat pour comprendre l'utilisation de cette grille et bitters qui va permettre de voir les divers styles. par défaut que vous pouvez obtenir rapidement sous le capot. en utilisant cette librairie. Si on retourne dans Dreamweaver ici, et que je place un document scss ici. Si je passe ce document scss je marque une variable dollar couleur par exemple qui serait égal à dièse 33 33 00 par exemple. Si je fais un body et que je vais utiliser un color et je vais utiliser la variable couleur, ici si j'enregistre ce document... Pour l'enregistrer, on va rester dans la nature de notre document. donc je suis dans préprocesseur, on va venir dans sass et je vais enregistrer ici 09-1 si j'enregistre. Voilà. Instantanément une compilation va se faire. vous avez vu que la flèche est arrivée et au niveau du css j'ai mon document qui a été compilé en css et la couleur a été récupérée. Vous pouvez faire des imports, vous pouvez faire des partials tout est pris en compte de manière native par Dreamweaver une fois que l'installation globale a été faite. Pour less, pas besoin de se compliquer la vie, on va faire un enregistrer sous tout simplement. Cette fois-ci on va l'enregistrer non pas sous scss mais sous less ici. Le problème c'est qu'on va directement compiler. Alors au lieu de le compiler ce que je vais faire, ce que je vous propose c'est de faire un copier ici. Je vais faire un nouveau document. Je vais faire un document de type less cette fois-ci. Je vais venir coller cette partie-là sauf que les varaibles dans less ne sont pas reconnus par le dollar mais par l'arobase ici. Et puis pour pouvoir compliquer, pas compliquer mais mieux s'assurer de la chose, au lieu de mettre en 33 je vais mettre en ff 33 00 par exemple ici. Au moment de l'enregistrement, je vais venir enregistrer dans sass, ici dans le même dossier puisqu'on se retrouve être, en fait, sur la même racine que sass sauf que je vais l'appeler less maintenant alors on se retrouve être sur la même racine par rapport à l'installation qui a défini nos dossiers sources comme étant s'appelant sass ici. C'est vrai qu'on aurait pu l'appeler source ici ça aurait été plus explicite. Ici, dès que je vais enregistrer ce fichier vous voyez qu'instantanément le second est arrivé ici. Si je regarde le second, on est bien dans un document less qui a été généré directement par Dreamweaver. Voilà donc une utilisation très simple et très transparente une fois l'installation faite. Quelques petits réglages à faire au niveau de config.rb. Puis en avant pvous pouvez travailler avec des préprocesseurs directement dans Dreamweaver.

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 !