Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir LESS

Compiler avec Dreamweaver CC 2017

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver CC 2017 peut compiler votre code LESS. Apprenez à configurer votre site Dreamweaver afin de compiler automatiquement votre code LESS.

Transcription

Je me trouve ici dans Dreamweaver CC 2017, puisque l'une des grosses nouveautés de Dreamweaver CC 2017 eh bien, c'est justement la possibilité de pouvoir compiler vos codes less en css directement dans Dreamweaver et ce, sans devoir installer quoi que ce soit d'autre. Alors pour pouvoir profiter de cette nouveauté, je vais définir un nouveau site dans Dreamweaver, donc Site, Nouveau site, je vais donner un nom à ce nouveau site. Je vais l'appeler par exemple Formation LESS. Je vais montrer à Dreamweaver où se trouve ce projet sur mon disque dur. Donc ça se trouve dans les exercices associés à cette formation, je suis dans le chapitre deux pour le moment. Et vous voyez que j'ai déjà toute une arborescence ici dans ce dossier racine, donc mon site quelque part est déjà en construction. Alors, nouveauté dans Dreamweaver CC 2017, vous avez ici une catégorie qui s'appelle Préprocesseur css et vous voyez dans l'onglet général de cette catégorie, eh bien, que Dreamweaver peut compiler vos codes less mais également vos codes SASS ou SCSS. Alors c'est quoi SASS et SCSS ? Eh bien, ce sont tout simplement d'autres préprocesseurs, donc des concurrents de less si vous voulez, d'autres solutions qui font globalement la même chose mais avec un langage un petit peu différent. Alors, je vais me rendre dans la catégorie Source et Sortie que voici, pour vous montrer que par défaut, quand Dreamweaver va compiler vos codes less, eh bien, la sortie css se fera dans le même dossier que la source. Alors ça, ça ne m'intéresse pas trop, moi, j'ai envie de définir mon dossier de sortie, donc je vais prendre l'option qui est ici dans le fond : Définir le dossier de sortie, et je vais dire à Dreamweaver que je veux que les fichiers css générés soient déposés dans le dossier css de mon site que j'ai créé à cet effet et qui est pour le moment complètement vide, vous le voyez. Donc je choisis ceci comme dossier de sortie, je vais également indiquer à Dreamweaver où se trouve mon dossier source. Donc je vais lui dire eh bien, voilà, mes fichiers less se trouvent ici dans mon dossier less. Donc compile uniquement les fichiers less qui se trouvent ici. Ça veut dire également que si vous placez des fichiers less ailleurs dans votre site eh bien, ils ne seront pas compilés par Dreamweaver. Donc je vais choisir ici mon dossier source comme ceci, vous montrer encore une petite chose ici dans la configuration du site, donc dans l'onglet Général des Préprocesseurs CSS, une petite case à cocher qui s'appelle : Compilaton automatique sur enregistrement de fichier, vous voyez que cette petite case est cochée par défaut et ça signifie tout simplement que quand vous allez modifier puis sauvegarder un fichier less, eh bien, Dreamweaver va automatiquement compiler ce fichier less. Si vous voulez compiler de manière manuelle et donc maitriser le moment auquel vous voulez compiler vos fichiers less, eh bien, vous pouvez toujours décocher cette petite case et compiler de manière manuelle. Alors moi, je vais la laisser cochée et enregistrer ici la configuration de mon nouveau site, voilà. Remarquez que dans le dossier css de mon site, je n'ai pour le moment rien du tout, il est complètement vide, alors je vais me rendre dans le dossier less et je vais ouvrir styles.less. Alors je vais modifier un petit peu ce fichier, je vais simplement ici retirer par exemple le dernier point virgule et puis le remettre, c'est tout simplement pour avoir l'occasion de sauvegarder ce fichier styles.less, donc COMMANDE ou CONTRÔLE-S pour sauvgarder le fichier, et vous voyez que Dreamweaver, au moment de la sauvegarde, eh bien, a généré ici le fichier styles.css dans le dossier css de mon site. Si je vais voir ce fichier styles.css, eh bien regardez, il s'agit tout simplement du résultat de la compilation, de styles.less en css, donc j'ai ici du css, tout à fait classique, c'est quelque chose que vous connaissez déjà. Alors, rappellez-vous que styles.less Par exemple ici, j'importe variables.less. Alors, que va-t-il se passer quand je vais modifier par exemple variables.less ? Donc je vais l'ouvrir, je vais modifier par exemple ici de nouveau la couleur, je vais mettre une couleur que tout le monde connait, la FF0000 donc c'est du rouge, je sauvegarde variables.less par CONTRÔLE ou COMMANDE-S, voilà. et vous remarquez que Dreamweaver de fichier variables.css. Bah tout simplement, Dreamweaver est suffisamment malin pour se rendre compte qu'en fait, variables.less est inclus et importé dans styles.css. Et donc, quand je sauvegarde variables.less, eh bien, c'est en fait styles.css que je désire compiler. Alors, la preuve c'est que si je vais dans styles.css ici, alors je vais descendre au niveau de mon header, le voilà, et donc vous voyez ici que c'est bien la couleur rouge, le ff0000 qui a été impactée ici, donc il y a bien une compilation qui a eu lieu au moment où j'ai sauvegardé mon fichier variables.less. Alors, deux trois petites choses encore ici dans Dreamweaver, dans le menu Fenêtre, de Dreamweaver au niveau des Résultats ici, vous avez la possibilité d'afficher sur votre interface, le panneau de sortie, voilà, il apparait ici dans le fond et je vais revenir dans variables.less, par exemple annuler ma dernière action, voilà, CONTRÔLE ou COMMANDE-Z, vous voyez que je suis revenu au code couleur de départ donc. Je vais sauvegarder mon fichier variables.less, voilà. Et regardez dans mon panneau de sortie, vous avez Réussite de la compilation de l'importation de styles.less par variables.less vers etc. Donc ça, ça veut dire que une compilation a bien eu lieu, que c'est bien le fichier styles.less qui a été compilé parce que variables.less a été modifié et est importé dans styles.less. La preuve, si je reviens maintenant dans styles.css, eh bien regardez, au niveau de mon header, c'est de nouveau le code couleur que j'avais au départ qui a été remis en place et donc il y a bien une compilation de nouveau qui a eu lieu. Alors, autre petite chose que je vais vous montrer, si maintenant je vais faire un clic-droit ici dans mon dossier less sur l'un de mes fichiers, donc par exemple sur styles.less, eh bien, je peux le compiler également de manière manuelle, en venant cliquer ici sur la commande Compiler. Je peux également utiliser le raccourci clavier F9 qui est associé à cette commande et donc si vous décidez de ne pas compiler de manière automatique à la sauvegarde de vos fichiers, eh bien, c'est comme ça que vous irez compiler manuellement donc vos fichiers, regardez, si je clique ici, eh bien dans mon panneau de sortie, vous voyez que styles.less a été correctement compilé en css, donc tout s'est bien passé de nouveau. Voilà donc comment ça fonctionne maintenant dans Dreamweaver CC 2017, c'est une nouveautée importante de Dreamweaver CC 2017, et pour vous, une option supplémentaire encore, de pouvoir compiler vos codes less en css.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :21 déc. 2016

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 !