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.

L'essentiel de Sass

Compiler du code Sass dans Dreamweaver

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver CC 2017 inclut un préprocesseur Sass. Découvrez comment configurer votre site Dreamweaver afin d'y compiler votre code.

Transcription

Si vous avez accès à Dreamweaver CC 2017, sachez que l'une des nouveautés de cet éditeur, c'est justement le support pour les préprocesseurs CSS, notamment, le support pour Sass. En fait, vous avez compris ce qui se passe, Dreamweaver embarque, tout simplement, une version de la bibliothèque LibSass et Adobe a créé une chouette petite interface graphique pour que vous puissiez interagir avec LibSass, directement depuis l'interface de Dreamweaver. Comment ça se passe ? Je vais d'abord, dans Dreamweaver, créer un nouveau site : « Site », « Nouveau site », je vais lui donner un nom, soyons fous, appelons-le « sass », par exemple, et puis j'ai montré à Dreamweaver où est stocké ce site, sur mon ordinateur, pour ça j'utilise cette petite icône, Mon site se trouve dans le dossier Sass qui se trouve ici, vous reconnaissez d'ailleurs, le fichier « index.HTML » et les autres dossiers avec lesquels nous avons déjà travaillé plus tôt, dans ce chapitre. Voilà qui est fait, alors, la nouveauté dans Dreamweaver CC 2017, c'est cette catégorie qui s'appelle Préprocesseur CSS, ici. Et dans la page générale de cette catégorie, vous remarquez d'abord que Dreamweaver supporte LESS et SASS. LESS, c'est en fait, un autre préprocesseur CSS, mais pour celui qui nous intéresse dans cette formation, c'est SASS et vous avez ici dans le fond de ce panneau, une série d'options spécifiques à SASS, vous reconnaissez les styles de sortie, vous reconnaissez les quatre styles ici, vous pouvez choisir celui que vous avez envie d'utiliser, je vais prendre « expanded » pour ma part. Vous pouvez ou pas créer les commentaires source, c'est ceux dont nous avons parlé dans la vidéo précédente, rappelez-vous, qui vous montrent dans quel fichier et dans quelle ligne d'un fichier particulier se trouve le code SASS qui génère un style CSS particulier. Et puis, vous pouvez ou pas générer la « mappe source », c'est ce fichier « .map », on a déjà vu dans les vidéos précédentes, on n'en a pas encore parlé de celui-là dans ce cours, mais rassurez-vous, ça vient plus tard dans ce chapitre. Remarquez également, dans cette page, la case à cocher qui se trouve ici, au-dessus. Compiler automatiquement lors de l'enregistrement du fichier, remarquez que cette case est cochée par défaut, ça veut dire que dès que vous allez sauvegarder un fichier Sass, Dreamweaver va, automatiquement, compiler le fichier CSS qui correspond. Autres options ici : Source et Sortie, vous voyez que par défaut, la sortie CSS se fera dans le même dossier que la source, ça ne m'intéresse pas trop, je vais définir mon propre dossier de sortie. Dans mon site, j'ai ce dossier CSS et c'est ça que je veux utiliser comme dossier de sortie, c'est là que je veux placer les fichiers CSS compilés. Je vais choisir ceci, je vais également en profiter pour spécifier un dossier source, vous voyez que, par défaut, le dossier source, c'est la racine de mon site moi, j'ai envie d'être un peu plus précis que ça et je vais dire à Dreamweaver que les fichiers à compiler, en fait, ils se trouvent ici, dans le dossier Sass qui lui-même, se trouve dans mon site. Voilà, il y a d'autres options possibles, notamment des options ici pour « Compass » ou « Bourbon ». Alors, « Compass » et « Bourbon », qu'est-ce que c'est ? Ce sont, tout simplement, des bibliothèques de mixins en Sass, on n'a pas encore parlé de mixins, on va laisser ces choses-là de côté pour le moment. Ce qui m'intéresse maintenant, c'est de bien spécifier la sortie CSS et le dossier source, ce que j'ai fait ici, donc, je vais enregistrer la définition de ce site, voilà. Et puis, regardez, ce que je vais aller faire, je vais aller ouvrir le fichier « styles.scss » et je vais faire comme ce que j'ai fait tout à l'heure dans Brackets. Je vais modifier ce fichier, par exemple, je vais retirer ici le « ; » et puis le remettre, ce qui me donne l'occasion de sauvegarder ce fichier par commande sous Ctrl+S, voilà, et une fois que c'est fait, je vais aller voir dans le dossier CSS, ici, regardez ce qui c'est passé. Dreamweaver a, tout simplement, généré mon fichier CSS et le fichier map qui correspond et vous voyez que ce fichier CSS, il utilise bien la syntaxe « expanded », la syntaxe étendue, et je retrouve ici, mes commentaires source, toutes les options que j'ai spécifiées dans la définition du site Dreamweaver, sont bel et bien respectées ici dans « styles.css ». Voilà, si vous utilisez Dreamweaver, Sass est installé avec Dreamweaver et vous pouvez l'utiliser tel quel, sans installation supplémentaire.

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 !