Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Sass

Débuter la création de l'application

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Démarrez la création de votre application Sass dans Dreamweaver CC 2017 et mettez en place les variables dont vous aurez besoin.

Transcription

Maintenant que notre site est configuré dans DreamWeaver, nous allons pouvoir démarrer la création de notre application SASS. Je vais passer dans la vue Code de ce fichier index.HTML qui est ouvert ici pour vous montrer qu'au début de ce code, dans l'entête, j'ai une balise Link qui fait référence à un fichier ddxBlog.css qui devrait se trouver dans le dossier CSS de mon site. Or, vous voyez, pour le moment, que ce dossier est complètement vide. Ce n'est pas grave, je vais générer le fichier ddxBlog.css et pour cela, je vais utiliser SASS, bien sûr. Dans le dossier SCSS, je vais créer un nouveau fichier que je vais appeler, tout simplement, ddxBlog.scss. Vous allez voir, au moment où je valide, Dreamweaver a compris ce qu'on lui voulait puisqu'il a déjà compilé ce fichier ddxBlod.scss qui est le résultat de la compilation de ce site, il a également généré le fichier Map qui correspond, comme je le lui avais demandé quand j'ai défini mon site dans la vidéo précédente. Tout cela est en route, ce fichier SCSS existe ma balise Link, ici, fonctionne bien puisque le fichier existe. Dans le dossier SCSS, je vais pouvoir commencer à créer mes partielles. Quelque partielles courantes qu'on trouve dans quasiment tous les projets, c'est évidemment Variables.scss, également, un nouveau fichier pour Mixins.scss, rappelez-vous que ce sont des partielles, donc j'ai besoin du Underscore au début du nom du fichier et de l'extension .scss, et puis je vais avoir besoin aussi de quelques fonctions personnalisées : Functions.scss. Pour mon fichier principal, ddxBlog.scss, je ne vais rien faire de particulier, je vais me contenter d'importer les partielles. Je vais faire un import des Variables, des Functions et des Mixins, voilà, ce sera @import, Dreamweaver m'aide. Et je vais importer Variables et je vais également importer Functions et je vais également importer Mixins, comme ceci. Je sauvegarde, je n'ai pas d'erreurs, je n'ai pas fait de fautes d'orthographe, je vais en profiter pour importer « Third Party Frameworks », je vais importer, dans le dossier Reset, le fichier Reset.scss, donc je vais faire un Import, dans Reset de Reset - attention, il faut un espace ici. Reset, comme c'est un fichier SCSS, je ne dois pas spécifier l’extension. Et je vais également importer, dans le dossier Font-awesome, le fichier de base qui s'appelle font-awesome.scss. Je l'ai renommé pour mettre cet Underscore et en faire également une partielle SASS, donc je vais importer, dans le dossier Font-awesome, ce fichier font-awesome, comme ceci. N'oublions pas les « ; », je sauvegarde, toujours pas d'erreur. Je n'ai pas fait de fautes de frappe, c'est une bonne nouvelle. Dans mon fichier SCSS je devrais déjà retrouver une série de choses, vous voyez que j'ai pas mal de lignes de code, c'est le reset et tout le framework font-awesome qui sont déjà dedans. Et ma page HTML a déjà un petit peu changé, vous voyez que j'ai ces icônes qui sont apparus, c'est déjà font-awesome qui est en route. Voilà, on ne va pas s'arrêter en si bon chemin, pour accélérer un peu les choses, je vous donne les fichiers TXT, vous allez retrouver Variables.txt, je fais un Cmd+A pour tout sélectionner, Cmd+C pour tout copier et je vais aller copier ceci dans Variables.scss par un Cmd ou Ctrl+V. Je sauvegarde, je fais la même chose avec Mixins.txt qui se trouve ici, Cmd ou Ctrl+A, tout sélectionner, Cmd ou Ctrl+C, tout copier, et je vais placer ceci à l'intérieur de mon fichier mixins.scss, Cmd ou Ctrl+V, je sauvegarde. Et puis je fais la même chose avec mes fonctions, Functions.txt, Cmd ou Ctrl+A, tout sélectionner, Cmd ou Ctrl+C, tout copier, et puis dans mon fichier Functions.scss, Cmd ou Ctrl+V pour coller. Dans la pratique, vous n'aurez pas forcément accès à tous ces fichiers TXT. Quoique, il n'est pas rare, quand vous faites plusieurs projets SASS, que vous gardiez vos Mixins et fonctions personnalisées dans des fichiers TXT ou déjà des fichiers SCSS, et, au moment où vous configurez un nouveau projet, vous rappelez systématiquement les Mixins et les fonctions avec lesquelles vous êtes habitués à travailler. Voilà, nous sommes prêts pour la prochaine vidéo. Dans la prochaine vidéo, nous allons commencer à mettre en place des véritables Styles CSS qui vont affecter cette page.

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 !