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

Inclure des bibliothèques tierces

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'aide de la directive @import, importez des frameworks tiers, comme Reset et Font-awesome, dans votre application Sass.

Transcription

Continuons notre exploration de la directive import de sass, afin d'inclure dans notre application sass et donc dans notre feuille de style css des bibliothèques tierce parties. Alors la première bibliothèque tierce partie que je vais insérer c'est ceci, c'est normalize.css c'est une feuille de style que vous allez trouver très facilement sur internet, et son objectif est de gommer les petites différences qu'il y aurait entre les navigateurs donc de normaliser l'apparence de votre site, à travers tous les navigateurs. Alors j'ai téléchargé cette feuille de style, je l'ai placé regardez, dans mon application sass, dans mon site donc. Ici dans le dossier css, j'ai un nouveau sous-dossier qui s'appelle normalize et là-dedans, j'ai un fichier qui s'appelle normalize - attention - point css. Donc c'est une feuille de style tout à fait normale et non pas un fichier sass. Est-ce que je peux quand même l'importer dans mon application sass ? Et bien oui, puisque rappelez-vous que cette directive import n'est pas spécifique à sass, elle fait également partie de la norme css de base, donc dans le dossier scss de mon site. J'ai maintenant un sous-dossier qui s'appelle normalize et dans lequel j'ai ce fichier qui s'appelle « normalize ... voilà, .css » comme ceci. Quand je sauvegarde mon fichier styles.scss et bien regardez, cette directive import ici est tout simplement transposée telle quelle quasiment, dans le fichier compilé. Donc au niveau de mon navigateur, ça se passe très bien, regardez. Mon fichier est un petit peu différent, mais pas trop. Alors l'une des choses que normalize.css va faire, c'est qu'elle va tout simplement supprimer l'espace que l'on avait par défaut entre le bord de la fenêtre et le bord du site. J'ai un petit problème de performances ici puisque je vais appeler le fichier styles.scss et ça c'est un appel http vers le serveur, une requête. Et puis ce fichier va à son tour, appeler ce fichier normalize.css et donc ça, c'est un deuxième appel vers le serveur. Serait-il possible d'intégrer le code normalize.css dans ma feuille de style styles.css en utilisant sass ? Et bien oui, puisque rappelez-vous que sass est un super set du css et donc tout ce qui est css normal donc le css qui est écrit ici dans normalize.css et bien c'est aussi du code sass tout à fait valide. Et donc il me suffit de transformer ceci en partiel sass, c'est-à-dire de renommer ce fichier, de mettre le underscore, de transformer l'extension en scss, voilà. Puis maintenant au niveau de styles.scss je vais simplement supprimer ici l'extension pour utiliser maintenant la version sass de cette directive import et pour vous montrer ce qui se passe, je vais recharger styles.css ici dans le panneau de droite sauvegarder dans le panneau de gauche styles.scss et regardez maintenant ma feuille de style et bien elle comprend 528 lignes de code puisque j'ai d'abord l'ensemble de normalize une fois que normalize est fini, alors il y a pas mal de lignes de code là-dedans donc c'est à partir de cette ligne-ci, 450 à partir de ce moment-là, ce sont mes styles à moi que j'ai définis dans mes partiels à moi ici, qui viennent à la suite de normalize.css. Donc voilà comment intégrer une feuille de style css que vous avez téléchargée dans votre application sass, il suffit de la considérer comme une partielle sass. Alors je vais intégrer une autre bibliothèque, c'est une bibliothèque qui s'appelle font-awesome. Ça c'est pour vous montrer que dans certains cas, ceux qui développent ces bibliothèques ont déjà pensé à nous qui développons des applications sass. Alors font-awesome, vous connaissez peut-être, c'est une icone font, c'est-à-dire que c'est une police de caractères qui ne contient pas de lettre et de chiffre comme d'habitude mais qui contient, regardez, une série d'icônes que je vais pouvoir utiliser dans mon application. Pour télécharger font-awesome c'est super simple. Vous allez sur la page d'accueil de font-awesome et il y a un gros bouton Download. Alors moi je l'ai déjà téléchargé donc je vais vous montrer ce que cela donne au niveau de mon système de fichiers c'est un fichier ZIP que j'ai téléchargé et que j'ai dézippé donc ça donne ceci. Alors que trouve-t-on là-dedans ? Et bien on trouve d'abord la police de caractères en question. Donc ça c'est quelque chose que je vais mettre à la racine de mon site, voilà. Et puis je vais trouver des feuilles de style css, deux feuilles de styles css. En fait c'est la même, mais en version normale et en version minifiée. Et puis surtout, je vais trouver deux dossiers. Un qui s'appelle less et un qui s'appelle scss. Rappelez-vous que less c'est tout simplement un autre pré-processeur css que celui qui nous occupe dans cette formation donc nous c'est le dossier scss ici, qui nous concerne. Et bien figurez-vous que le fichier css que nous avons ici dans le dossier font-awesome est le résultat de la compilation de cette application sass. Et que trouve-t-on là-dedans ? On trouve le fichier principal et une série de partielles, c'est exactement ce que l'on est en train de faire au niveau de notre propre site. Et bien regardez, je vais prendre le code scss de font-awesome et je vais tout simplement venir le mettre dans mon application. Voilà. Je vais renommer ça font-awesome. Comme ceci. Et donc quand je reviens dans brackets regardez, font-awesome est maintenant intégré à mon application sass également. Alors que va-t-on retrouver là-dedans ? Le fichier principal appelle tout simplement tous les autres. C'est exactement ce que nous sommes en train de faire nous-même, dans notre propre application. Qu'est-ce qu'il me reste à faire maintenant ? Il me reste tout simplement, alors j'ai refermé un peu vite ce dossier, voilà, à importer dans styles.scss ce fichier font-awesome.scss qui est le fichier principal du framework font-awesome. Donc allons-y gaiement. @import Voilà. Donc dans mon dossier scss, dans le dossier font-awesome et bien j 'ai maintenant ce fichier font-awesome.scss et comme c'est un fichier sass, je ne dois pas spécifier ici l'extension. Je sauvegarde et regardez ce qui se passe. J'ai maintenant un super gros fichier css de plus de 3 500 lignes, puisque j'ai d'abord la feuille de style normalize puis j'ai l'ensemble du framework font-awesome et puis j'ai mes styles à moi qui suivent pour terminer la feuille de style. Alors maintenant que font-awesome est intégré dans ma feuille de style qu'est-ce que je vais pouvoir faire avec ça ? Je vais pouvoir intégrer des icônes dans mon site. Donc je vais aller voir le jeu d'icônes disponible. Est-ce qu'il y en a une pour css ? Oui, il y en a une ici pour css3. Pour l'intégrer, je vais prendre ce petit bout de code html, le copier et venir le coller dans ma page html, la voilà. Là où je veux voir cette icône, c'est-à-dire juste devant mon titre de niveau un. Je sauvegarde, je reviens dans mon navigateur, je recharge ma page, alors c'est presque bon. Vous voyez qu'il y a quelque chose qui s'est passé donc ici j'ai un caractère mais par contre je n'ai pas l'icône que j'attendais. Alors pourquoi ? Et bien tout simplement parce que dans l'application font-awesome, j'ai un fichier qui s'appelle variables.scss et qui défini une variable qui s'appelle font-path, le chemin vers les polices de caractères. La valeur de cette variable c'est ../fonts Et bien cela voudrait dire que dans mon site, je vais refermer ceci, à partir de ma feuille de style compilée, donc de styles.scss je devrais remonter d'un niveau dans la hiérarchie avant de trouver le dossier fonts. Ça ne correspond pas vraiment à la hiérarchie de mon site, puisque styles.scss se trouve directement à la racine. Et bien qu'à cela ne tienne, je vais changer la valeur de cette variable, sauvegarder ceci, n'oublions pas d'aller maintenant dans styles.scss pour voilà, la recompiler. Je sauvegarde. Et donc maintenant, normalement j'ai recompilé font-awesome avec la nouvelle variable et j'ai accès vous voyez, au jeu d'icônes qui se trouve ici. Donc dans cette vidéo, vous avez appris à intégrer dans votre application sass des frameworks tierce parties. Alors ce sont parfois des feuilles de style css que vous pouvez considérer comme des partielles sass puisque tout ce qui est css est également sass. Et parfois on vous donne carrément accès à l'application css en tant que telle et donc vous pouvez l'importer telle quelle dans votre application scss à vous.

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 !