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

Comprendre ce qu'est Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Partez à la découverte du langage Sass (Syntactically awesome stylesheets) et de la manière de l'intégrer dans votre flux de travail.

Transcription

Pour bien comprendre ce qu'est Sass, je vous propose sans plus tarder un premier petit exemple pratique. Alors, je me trouve ici sur une toute simple petite page web, vous voyez, une petite page web qui est composée d'une entête, une entête dans laquelle je vais retrouver le logo Sass, ainsi qu'un titre qui se trouve ici. Ensuite, j'ai la zone principale de mon site avec également un titre, puis trois paragraphes de textes, et vous voyez dans le second paragaraphe, ici, j'ai même un lien. Et puis, dans le fond de la page j'ai un pied de la page, un « Footer » avec ici, de nouveau, un paragraphe de texte à l'intérieur de ce Footer, quelque chose de tout à fait classique, une construction telle qu'on en rencontre sur de nombreuses pages web. Au niveau du code, ça donne ceci, je me trouve ici, dans un éditeur de code qui s'appelle « Brackets ». C'est celui que je vais utiliser pour cette formation, mais vous pouvez, bien évidemment, utiliser l'éditeur de code que vous voulez, je vous encourage même à utiliser celui avec lequel vous êtes habitué à travailler. Ici, dans code HTML on va retrouver les trois grandes zones de ce site. Je commence ici par le « header » à l'intérieur duquel on retrouve cette image, et puis, un titre. J'ai également la section principale avec un titre ici, en ligne 15, et puis, trois paragraphes. Et ramarquez, dans le second paragraphe j'ai ici le lien dont je vous ai parlé plus tôt. Et puis, la dernière grande section du site, c'est le Footer qui se trouve ici, le pied de page avec également un paragraphe de texte à l'intérieur de ce Footer. Remarquez également, en ligne 6 de ce code HTML, je fais un lien vers une feuille de style, une feuille de style qui s'appelle « styles.css » et qui se trouve dans le dossier CSS de mon site. On va aller voir à quoi elle ressemble, donc, dans le dossier CSS, je trouve ici ce fichier « styles.css ». Voilà, la feuille de style CSS qui régie l'apparence de la toute simple page web que vous avez examiné plus tôt dans cette vidéo. Inutile de vous préciser que ce n'est pas moi qui ai écrit cette feuille de style CSS. Cette feuille de style CSS, elle a été écrite pas Sass. Moi, j'ai écrit un fichier Sass, et puis, Sass a compilé mon fichier Sass en fichier CSS, et au passage j'ai demandé à Sass également de minifier ce fichier CSS lors de la compilation, ça veut dire qu'on a retiré tous les espaces et tous les sauts de lignes, d'ailleurs, vous voyez que ce code CSS est, en fait, une seule grande ligne de code, regardez ici, le numéro 1 qui prend quasiment toute la place dans ce fichier. Alors, qu'est-ce que j'ai écrit, moi ? J'ai écrit un fichier qui se trouve ici, dans le dossier Sass du site. Je vais ouvrir ce dossier, et dans ce dossier je trouve un fichier qui s'appelle « styles.scss », et c'est lui, en fait, qui a été compilé et qui est devenu « styles.css ». Vous voyez que ces deux fichiers ont le même nom. Ils s'appellent tous les deux « styles », il y a juste l'extension qui change, donc, SCSS ici pour la version Sass de ce fichier, et puis, CSS, ça, c'est l'extension normale que vous connaissez pour les fichiers CSS. Alors, allons voir ce qui se passe dans « styles.scss ». Il ne se passe pas grand chose, ici, dedans. Vous remarquez que je ne fais simplement qu'importer les autres fichiers de mon application Sass, et notamment, celui-ci qui s'appelle « Variable ». Alors, c'est un fichier qui se trouve là, qui s'appelle « variables.scss », vous le voyez ici. Et quand j'ouvre ce fichier, dans ce fichier vous constatez que je définis une série de variables. Et notamment, en début de fichier, une série de variables qui correspondent aux couleurs que je vais utiliser sur ma page web. Et la première d'entre elles s'appelle « pink », et vous voyez que la variable « pink » correspond au code couleur héxadécimale, c'est 69. Ça correspond à ce rose que vous avez vu sur la page. Au passage vous avez ici l'une des raisons pour laquelle j'aime bien utiliser « brackets », c'est que quand je passe ma souris sur un code couleur, je vois la couleur associée à ce code. Et vous reconnaissez probablement ici ce rose, puisque c'est celui qu'on utilise sur ma toute simple page web. Regardez, c'est le rose ici que j'utilise dans le fond du dégradé qui me sert de « background » de fond à l'entête, j'ai au début de ce même dégradé une autre teinte de ce même rose. Remarquez également toujours le même rose au niveau de la couleur de fond du pied de page, et toujours le même rose ici, au niveau de la couleur du texte, cette fois-ci, du lien qui se trouve dans la zone principale de mon site. Je vais retourner sur mon fichier « variables » pour vous montrer une petite chose : je vais changer la valeur de cette variable, je vais changer le code couleur qui correspond à la variable « pink ». Alors, pour ça, ici, dans Brackets, c'est très simple, je vais faire un clic droit et je vais lui demander une édition rapide de ce code couleur, une autre raison pour laquelle j'aime bien utiliser Brackets. Je vais ici changer la couleur, je prends, par exemple, un jaune relativement foncé, quelque chose comme ça, et vous voyez Brackets est en train de me générer ici un autre code couleur. Alors, je vais sauvegarder cette page, ce fichier « variables.scss ». Pour le sauvegarder, commande S sur Macintosh, Ctrl S sur Windows. Et puis, je vais retourner au niveau de ma page web et la rafraîchir dans mon navigateur. Et là vous constatez que tous les roses sont devenus jaunes, c'est-à-dire que le fond ici de mon dégradé, il n'est plus rose, c'est la nouvelle couleur que j'ai choisie. Le dessus de mon dégradé, c'est une autre teinte de cette nouvelle couleur. Même chose pour mon pied de page, ici, mon « Footer », il a également changé de couleur, ainsi que la couleur du texte ici, de mon lien, au niveau de la zone principale de mon site. Voilà, vous voyez qu'il m'a suffit de changer un seul petit paramètre au niveau de mon application Sass, et au moment où j'ai sauvegardé ma page « variables.scss », Sass a recompilé une nouvelle version de ma feuille de style CSS et chaque fois que j'utilisais ma couleur rose, j'utilise maintenant ma nouvelle couleur et je n'ai pas dû pour ça passer en revue l'ensemble de ma feuille de style. J'espère que ce premier exemple vous met l'eau à la bouche et qu'il vous permet un petit peu de percevoir la puissance que l'on va pouvoir dégager de ce système un petit peu aussi comment tout cela fonctionne quand il faut écrire du code Sass pour le compiler après en CSS. Maintenant, nous avons une formation complète pour découvrir exactement comment tout cela fonctionne.

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 !