L'essentiel de Sass

Configurer le site dans Dreamweaver

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez développer un nouveau site web dans Dreamweaver CC 2017. Puis, vous passerez à la configuration de votre application Sass.

Transcription

Dans ce dernier chapitre, je vous propose d'examiner ensemble un cas pratique. Nous allons utiliser Dreamweaver CC2017 comme éditeur parce que cette dernière version de Dreamweaver est capable de compiler nos fichiers SASS sans aucune installation supplémentaire, c'est vraiment une question de facilité dans le cadre de cette formation. Bien évidemment, si vous n'avez pas accès à Dreamweaver CC2017, ou si vous n'avez pas envie de l'utiliser, vous pouvez utiliser l'éditeur de code que vous voulez, prenez celui qui vous convient le mieux. Celui avec lequel vous êtes habitués à travailler. Dans Dreamweaver CC2017, je vais définir un nouveau site, je vais dans Site, Nouveau Site. Je vais donner un nom à mon site, je vais l'appeler Sass Exemple, comme ça, par exemple. Et puis je vais surtout montrer à Dreamweaver où se trouve le dossier racine de ce site sur le disque dur. Je vais cliquer sur la petite icône du dossier. Dans le chapitre 6 des exercices associés à cette formation vous avez un dossier Start et c'est celui que l'on va utiliser. Je vais choisir ce dossier comme dossier racine. Ce n'est pas fini, ne cliquez pas tout de suite sur Enregistrer. Avant d'enregistrer, on va aller voir au niveau des pré-processeurs CSS. Remarquez cette petite case à côté qui est cochée, par défaut, la compilation aura lieu de manière automatique à chaque fois qu'on va sauvegarder l'un de nos fichiers SASS, au niveau des réglages de SASS, je veux un stye Expanded, ça me permettra de lire le fichier CSS généré, et donc de détecter éventuellement les erreurs de compilation ou celles que j'aurais faites au niveau de mes fichiers SASS. Je vais aussi demander à Dreamweaver de générer la Map source, c'est-à-dire le fichier .map, qui me permet, quand j'inspecte mon site dans un navigateur, avec les outils de développement qui équipent les navigateurs maintenant, d'avoir référence directement aux fichiers SCSS qui ont généré un style CSS plutôt qu'au fichier CSS compilé. Au niveau source et sortie, vous voyez que, par défaut, Dreamweaver va mettre la sortie CSS, donc les fichiers compilés, dans le même dossier que la source, ça ne m'intéresse pas du tout. Je vais m'empresser de définir un autre dossier de sortie et ce sera le dossier CSS, déjà présent dans mon site, mais vide. Et puis, je vais également spécifier un dossier source, je vais dire à Dreamweaver, en cliquant sur cette petite icône, que dans mon site, les fichiers à compiler se trouveront dans ce dossier SCSS. Remarquez que j'ai déjà deux choses dans ce dossier, le framework font-awesome et un dossier qui s'appelle Reset, ce sont des bibliothèques tierce partie que nous allons intégrer dans notre feuille de style. Je choisis ce dossier SCSS comme source, et maintenant, je vais enregistrer la configuration de mon nouveau site. Voilà, les fichiers et dossiers apparaissent sur le côté, remarquez le dossier SCSS qui, pour le moment, est vide et puis le fichier index.html, je vais l'ouvrir dans Dreamweaver, dans la vue en direct de Dreamweaver, vous voyez ce fichier HTML, c'est un code HTML tout à fait valide mais vous constatez que, pour le moment, il n'y a aucune mise en forme qui affecte ce site, je vous donne rendez-vous dans la prochaine vidéo de ce chapitre pour démarrer la création de l'application SASS avec Dreamweaver.

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 !