L'essentiel de Sass

Configurer l'extension Brackets-Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à configurer l'extension Brackets-Sass afin qu'elle réponde aux besoins spécifiques de votre projet.

Transcription

Dans cette vidéo, nous allons paramétrer notre extension afin qu'elle compile nos fichiers Sass, avec les options qui conviennent à notre projet web et en particulier, j'ai envie ici que ça compile aussi, bien sûr, dans le bon dossier. Alors, je vais commencer par supprimer le fichier CSS qui a été compilée lors de la vidéo précédente et son fichier map compagnon, et puis, pour spécifier dans Brackets, des options qui sont spécifiques à mon projet, je vais devoir créer un fichier spécial à la racine de ce projet, je vais revenir à la racine, c'est-à-dire là où ce trouve index.HTML et à cet endroit-là je vais faire un clic droit ici dans le vide de me colonne pour céer un nouveau fichier et ce fichier, je vais l'appeler « .brackets.json », comme ceci. Alors, JSON pour ceux qui ne font pas de JavaScript, ça signifie « JavaScript Object Notation ». Dans ce fichier « brackets.json », je vais devoir spécifier un objet JavaScript à l’intérieur duquel je vais pouvoir inscrire mes différentes options. Pour créer un objet JavaScript, c'est très simple, il vous suffit tout simplement d'une paire d'accolade qui s'ouvre et qui se ferme, voilà, et puis la première option que je vais mettre dans cet objet, c'est l'option sass.enabled et je vais rendre ça égale à « false », ça peut paraître un peu bizarre, mais je suis en train de désactiver Sass par défaut dans mon projet. Rassurez-vous, je vais maintenant mettre une deuxième propriété pour pouvoir réactiver Sass mais uniquement, dans le cadre de ce fichier styles.scss qui se trouve dans le dossier Sass de mon projet. Pour ça je vais avoir besoin de la propriété « path » et je vais pouvoir spécifier un chemin, pour ça j'ai besoin d'un objet JavaScript de nouveau, voilà, et le chemin auquel je m'adresse dans mon site, c'est sass/styles.scss. Qu'est-ce que je vais faire pour ce fichier-là ? Je vais faire un tas de choses. Comme j'ai un tas de choses à spécifier, je vais de nouveau, avoir besoin d'un objet. Première chose que je vais spécifier pour ce fichier « styles.scss » en particulier, c'est de nouveau, sass.enabled mais cette fois-ci, je vais remettre ça à « true », c'est-à-dire que je vais activer la compilation vers CSS, mais uniquement dans le cadre de ce fichier « styles.scss » qui se trouve ici. Alors, je vais également spécifier une série d'options pour que cette compilation en css se passe comme je le souhaite. Pour ça j'ai besoin de sass.options, voyez que c'est options au pluriel, mais comme j'ai un tas d'options possibles j'ai de nouveau besoin ici d'un objet Java Script avec ces accolades qui s'ouvrent et qui se ferment. Première option, c'est une option qui s'appelle « outputDir », donc, répertoire de sortie. Le répertoire de sortie, qu'est-ce que c'est ? Par rapport à l'endroit où se trouve mon fichier source, mon fichier source se trouve dans le dossier Sass, je vais devoir, . ./, remonter à la racine de mon site et puis, là je vais trouver le dossier css qui se trouve ici, et n'oubliez pas la barre oblique ici, à la fin pour dire que css, c'est en fait, un dossier et non pas un fichier. Deuxième option que je vais spécifier, remarquez ici la virgule pour séparer les options, c'est une option qui s'appelle outputStyle, comme ceci. On a déjà parlé de ces styles dans la vidéo précédente, je vais choisir ici, le style expanded. Le style « expanded », c'est celui qui est le plus proche de ce que j'écrirais moi-même, si j'écrivais le fichier css directement. Dans le cadre du développement de mon application, ce style va me permettre de pouvoir, très facilement, lire le fichier CSS qui aura été compilé et de repérer les éventuelles erreurs ça me permettrait, par exemple, d'aller corriger mes applications, donc, mes fichier « scss » dans le cas où il ne générerait pas du css valide. Voilà, autres options possibles que je vais spécifier ici, c'est le includePath, comme ceci. Rappelez-vous que dans le fichier Styles.css qui est ici, qu'est-ce que je fais dans ce fichier ? Je vais tout simplement, importer d'autre fichiers qui font partie de mon application sass. Avec l'option ici, IncludePaths, remarquez que c'est au pluriel ici, je vais pouvoir spécifier ou chercher à quel endroit de mon application j'ai envie de chercher les fichiers à importer dans le fichier source principale, et ici, je vais, tout simplement, spécifier, ici, des crochés vides puisque par défaut, sass va aller rechercher les fichier à importer dans le même dossier que là où se trouve le fichier source principale, donc c'est exactement ce qui me faut ici, dans mon site puisque les fichiers que j'ai importés et qui sont là, sont au même endroit que ce fichier scss principal. Et puis dernière option dont je vais vous parler c'est l'option compiler. Là j'ai deux valeurs possibles ; soit je spécifie « libsass », comme ceci, ça c'est l'option par défaut, si vous ne spécifiez pas cette option compiler, eh bien, ce sera libsass qui sera utilisé Et quand vous faîtes ça, ça veut dire que vous allez utiliser pour compiler vos applications sass en css, la bibliothèque libsass qui est livrée avec l'extension brackets. Le gros avantage de cette technique, c'est que vous n'avez pas besoin d'installation complémentaire, vous n'avez pas besoin d'installer un environnement « Ruby » ou d'installer la ligne de commande sass sur votre machine puisque libsass ici sera utilisé et livré avec votre extension. Par contre, l’inconvénient, c'est que vous utiliserez la version de libsass qui est livrée avec votre extension et ce n'est pas forcément la dernière disponible. Pour ça il y a une autre valeur possible ici qui est Ruby. Ruby, ça signifie que vous avez besoin, à ce moment-là, d'installer un environnement « Ruby » et la ligne de commande sass, mais par contre, vous allez compiler avec cette ligne de commande donc, avec la version de sass que vous aurez vous-mêmes installé ou mis à jour. Ici, c'est l'extension qui va interagir avec cette ligne de commande et vous n'aurez plus besoin d'aller vous-même dans le terminal, comme on a fait précédemment dans ce chapitre. Je vais sauvegarder ici ce fichier « brackets.json » et puis je vais refaire la petite expérience de tout à l'heure, c'est-à-dire je vais retourner dans ce fichier « styles.scss », je vais le modifier, voilà, ça me donne l'occasion de le sauvegarder et là vous remarquez effectivement qu'il y a une compilation qui a lieu, mais le fichier généré se trouve bel et bien dans le dossier CSS, maintenant il est ici, et regardez, le style qui est utilisé, c'est le style « expanded », c'est quelque chose que je peux lire de manière facile. Regardez ce qui s'est même passé ici, on a rajouté une série de commentaires afin de bien vous montrer quels fichiers scss et dans quelle ligne de ce fichier, sont spécifiées les informations qui ont permis de compiler ce style CSS particulier. Avant de se quitter, je vais faire un bref retour par le navigateur ici pour vous montrer la documentation de cette extension. Si vous allez voir sur cette page sur GitHub, vous allez trouver toutes les options possibles que vous pouvez mettre dans ces objets. Vous allez même retrouver dans le fond, un fichier « .brackets.json » de base dont vous pouvez vous servir pour spécifier les paramètres de votre projet en particulier. Voilà, dans cette vidéo, vous avez appris à paramétrer grâce au fichier « .brackets.json », l’extension « brackets » qui va maintenant vous permettre de compiler vos applications Sass directement, au niveau de votre éditeur de code.

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 !