Optimiser votre développement CSS avec Sass (programmation CSS)

1. Introduction: Bonjour, je suis Christopher Dodd et dans cette classe, nous allons apprendre à surcharger votre développement CSS en utilisant Sass. Sass est un langage de script de préprocesseur qui est interprété ou compilé en CSS. C' est essentiellement un langage de programmation qui nous permet d'écrire CSS avec des fonctionnalités de programmation comme les variables, l'imbrication et les calculs. Bien sûr, avant de prendre ce cours, vous devriez déjà être familier avec CSS. Mais si vous utilisez CSS depuis un certain temps, vous êtes probablement confronté à quelques situations dans lesquelles vous avez dû écrire sélecteurs ridiculement longs ou oublié le code hexadécimal ou RGBA d'une couleur que vous avez utilisée tout au long de votre document. Eh bien, ce ne sont que quelques-uns des quelques problèmes que Sass nous aide à résoudre et me faire confiance, une fois que vous commencez à utiliser Sass, vous ne voudrez pas revenir à l'ancienne façon d'écrire CSS. Donc, comme le titre le suggère, cette classe va être tout au sujet de l'amélioration de votre flux de travail de développement CSS avec Sass. Nous allons regarder comment fonctionne Sass, puis nous allons commencer à l'utiliser, refactoriser le code CSS existant pour utiliser quelques-unes des meilleures fonctionnalités de Sass. Donc, si vous êtes prêt à surcharger votre développement CSS avec Sass, cliquez sur la vidéo suivante et je vous verrai à l'intérieur. 2. Comment fonctionne Sass: Avant de commencer à examiner certaines des fonctionnalités des SaS, je voulais m'assurer que nous comprenons tous comment fonctionne réellement les SaS. Laissez-moi être clair. SaS ne remplace pas CSS, il aide à le générer. Comme vous devriez déjà le savoir, HTML est le langage de balisage pour le web, CSS est le langage qui décrit le style du HTML, et JavaScript est le langage de programmation du web. Ces langages sont la norme en matière de développement web frontal et les ASS ne changent pas cela. SaS n'est pas quelque chose qui peut fonctionner dans votre navigateur. Au lieu de cela, SaS ajoute une autre couche à notre développement CSS. Il faudra un logiciel supplémentaire qui prend le code SaS et le compile en CSS, que CSS compilé va maintenant fonctionner dans le navigateur comme un fichier CSS normal. Étant donné que CSS restera le langage de feuille de style du web, pourquoi avons-nous besoin d'ajouter une couche supplémentaire ici ? La réponse est que nous n'avons pas besoin d'utiliser SaS du tout, mais l'utiliser rend les choses beaucoup plus faciles une fois que nous commençons à travailler sur des projets plus importants. Afin de transformer le code SaS en CSS, un logiciel est nécessaire pour compiler le code SaS, et ce logiciel pourrait être basé sur le cloud ou exécuté localement. Dans la leçon suivante, je vais démontrer les fonctionnalités intéressantes des ASS à l'aide d'un outil basé sur le cloud, puis dans la leçon suivante, nous allons apprendre comment configurer un outil sur votre propre ordinateur pour compiler des ASS. Ça a l'air bien ? Super. Allons dans la leçon suivante, où nous commencerons à écrire des ASS réels. 3. Les principales fonctionnalités de Sass: Comme c'est le cas pour apprendre à peu près n'importe quelle technologie sur le web, le meilleur endroit pour commencer est le site officiel. Je suis ici sur sass-lang.com et voici le site pour Sass. Comme vous pouvez le voir, beaucoup d'informations ici. Je vais cliquer sur ce lien pour apprendre Sass. Ici vous pouvez voir une page pour les bases de Sass. Voici quelques-unes des fonctionnalités dont nous allons parler dans cette vidéo. Si vous vous perdez à n'importe quel moment, vous pouvez simplement venir ici pour référence. Notez que pour chacun de ces exemples, il existe une version Sass et une version SCSS. Nous allons également couvrir la différence entre ces deux-là dans cette leçon. Ne vous inquiétez pas pour ça, nous allons le couvrir très bientôt. Pour démontrer ces fonctionnalités principales, je ne veux pas commencer par installer un compilateur sur votre ordinateur tout de suite. Je veux te montrer Sass. Je vais commencer par un émulateur Sass basé sur le cloud ici. Celui-ci s'appelle sassmeister.com. Ici, vous pouvez voir qu'il est déjà enregistré un exemple de code sur lequel j'ai déjà travaillé. Laisse-moi juste éclaircir ça, et recréons-le maintenant pour vous, vous puissiez voir ce qui se passe. Juste avant de commencer avec la syntaxe Sass, je voulais mentionner brièvement que si vous n'avez pas déjà étudié le CSS et que vous savez comment l'utiliser, alors allez certainement le faire d'abord. Je veux dire, vous pouvez apprendre Sass et comment il génère CSS sans connaître CSS, mais il est beaucoup mieux d'apprendre CSS d'abord puis d'apprendre comment Sass peut vous aider à générer CSS. Juste que j'ai mentionné que je suis sûr que la plupart d'entre vous connaissent déjà CSS, et c'est ce que vous êtes ici pour apprendre à l'écrire plus efficacement, mais pour ceux d'entre vous qui ne connaissent pas CSS du tout ou n'ont pas passé beaucoup de temps avec elle, je recommande de prendre un pas en arrière. Il y a beaucoup de cours en ligne. J' ai une classe sur Skillshare sur HTML et CSS. Donc oui, je vous recommande certainement de connaître CSS avant de commencer à commencer avec Sass. Donc, avec cela hors du chemin, apprenons en fait la première caractéristique majeure de Sass et c'est l'imbrication. Je vais aller ici à la documentation, faire défiler vers le bas jusqu'à l'imbrication. Comme vous pouvez le voir ici dans cet exemple qu'ils ont fourni, nous avons des sélecteurs d'éléments ici, et ils sont imbriqués dans cet élément nav. Ce que cela fait va faire avant nav sur le devant de tous ces éléments afin que vous puissiez les cibler seulement quand ils existent dans un nav. L' autre chose que vous remarquerez sur Sass est n' y a pas de points-virgules à la fin des styles, et il n'y a pas d'accolades. Beaucoup de gens aiment écrire du code de cette façon. Tout cela est basé sur l'indentation. Avec CSS, nous pouvons grouper tout cela en une seule ligne, mais avec Sass, nous devons certainement avoir des lignes et une indentation. Sinon, il ne saura pas quoi faire, et nous finissons par écrire moins de code parce que nous n'avons pas ces crochets ou points-virgules bouclés. Mais comme vous le verrez très bientôt, cette syntaxe n'est pas la façon habituelle que les gens aiment le faire. Nous allons bientôt passer au SCSS. Mais regardons en fait un exemple différent en ce moment. Disons que par exemple, nous avons un élément de carte, et dans cet élément de carte, nous avons le corps de la carte, et dans ce corps nous pourrions avoir un bouton que nous voulons cibler. Très bien, donc en faisant ça comme Sass, je peux cibler le corps de la carte à partir de la carte, comme ça. Disons simplement que nous voulons avoir une couleur de fond de noir et une couleur de blanc. Maintenant, le CSS va être généré et comme vous pouvez le voir, il est précédé la carte à l'avant là-bas. Mais nous pouvons aussi aller plus loin, et peut-être que nous voulons cibler un élément de bouton dans ce corps de carte. Alterons les couleurs ici. Je vais faire la couleur fond blanc, et la couleur du noir. Maintenant, vous pouvez voir que nous avons toujours la carte pré-fixée au corps de la carte, mais nous avons aussi notre élément de bouton sélectionné ici avec le corps de la carte et la carte y sont ajoutés. Cela est vraiment utile lorsque vous écrivez de nombreux éléments profondément imbriqués. Si je devais écrire un élément de liste par exemple, et peut-être que je veux transformer le texte en majuscules. Ce ne sont que des styles aléatoires, en passant, c'est juste pour vous montrer comment il sera généré en CSS. Vous pouvez voir ici que où nous répétons beaucoup en l'écrivant en CSS. Eh bien, au lieu d'écrire une carte à points, un corps de carte à points et de creuser dans l'élément de cette façon, comme nous le ferions en CSS, nous pouvons plutôt créer un arbre d'indentations et de sauts de ligne, et il le créera pour nous là-bas. Cela dit, nous pouvons également mettre dans un style pour la carte ici. Peut-être que nous voulons un rembourrage de dix pixels. Nous pouvons mettre nos styles pour cet élément. Nous pouvons également imbriquer d'autres styles à l'intérieur. Plutôt cool. Il y a aussi cette autre fonctionnalité dans Sass qui utilise l'esperluette pour cibler des pseudo-classes. Une pseudo-classe est quand vous avez un deux-points après un élément, et peut-être que c'est le premier enfant, peut-être que c'est l'état de vol stationnaire, peut-être que c'est la pseudo-classe après de cet élément. Un courant est en vol stationnaire, et on a un bouton juste ici qui descend ici. Nous pourrions écrire une autre petite règle de style ici pour l'état du survol du bouton. Peut-être que nous avons une couleur de fond de gris au lieu de blanc. Ça va marcher, mais on peut faire quelque chose d'un peu plus sexy que ça. Ce que nous pouvons faire est d'imbriquer cela à l'intérieur et d' utiliser une esperluette pour accéder au parent ou pour référencer le parent. Maintenant, nous allons mettre ça en retrait. Maintenant, il va générer et vous pouvez voir que nous n'avons pas à nous répéter en utilisant le bouton sélectionné de cet élément, nous pouvons utiliser l'esperluette. Donc, une grande utilisation de l'esperluette, comme nous le voyons ici, est de cibler une pseudo-classe d'un élément. Nous n'avons pas vraiment besoin de réécrire le nom de l'élément. On peut juste l'imbriquer à l'intérieur avec cette pseudo-classe. Nous pouvons également le faire pour modifier les classes. Disons par exemple que nous avions un corps de carte gris. Disons juste que nous utilisons un système comme BEM pour écrire des cours, que je vais vous montrer dans une seconde. Disons qu'on a une carte, désolé, corps de carte, et qu'on utilise un modificateur comme gris. On a donc une couleur de fond grise. Voyons ce qu'on obtient ici. Il y a des cartes-corps dans les cartes. Nous voulons lui donner une couleur de fond de gris. Mais comme vous pouvez le voir ici, nous nous sommes répétés avec l'utilisation de card-body. Ce que nous pouvons faire, c'est remplacer ça par une esperluette. Maintenant, c'est assis sur la carte, donc vous avez juste besoin de l'indenter un de plus. Maintenant, vous pouvez voir, nous avons obtenu exactement le même résultat qu'avant. C' est ce que nous avions avant. C' est ce que nous avons maintenant. Comme vous pouvez le voir, exactement le même résultat. C'est l'imbrication. La prochaine fonctionnalité cool que nous avons dans SSAS est des variables. Donc, les variables sont le plus couramment utilisées pour les couleurs, mais nous pouvons aussi l'utiliser pour des valeurs comme ce rembourrage, et cela nous donne l'avantage de définir nos couleurs une fois et de pouvoir les changer en un seul endroit et pour que ce changement aille tout au long du projet. Il nous permet également de donner des noms à des choses comme, disons par exemple que nous voulions appeler ce rembourrage moyen. On pourrait mettre une variable ici. Faisons ça maintenant. Moyen - rembourrage 10 pixels, puis nous pouvons remplacer cette valeur ici par la variable. Nous allons obtenir le même résultat dans notre CSS. Mais, si nous devons changer cela plus tard, peut-être que nous voulons une valeur plus élevée pour le remplissage moyen, nous pouvons réellement entrer et changer la variable ici et n'importe où dans notre document qui fait référence à cette variable. Il va tirer la dernière valeur d'ici. Le plus souvent, cependant, vous allez voir les variables utilisées pour les couleurs. Ici, vous pouvez voir que nous utilisons trois couleurs différentes que nous avons noir, blanc et gris. Évidemment, la relation entre ces couleurs doit avoir un sens parce que vous devez avoir un contraste et tout cela. Ce que nous pouvons faire ici est d'écrire quelques noms pour nos couleurs et ensuite nous pouvons utiliser la variable au lieu de l'écrire explicitement dans notre document. Je vais avoir color-bg-dark. Cela va nous permettre de changer la couleur de fond sombre en ce moment c'est noir. Mais nous pouvons y aller et changer ça plus tard pour tous les milieux sombres si nous le choisissons. Je vais aussi avoir un color-bg -light, qui sera blanc. Là, nous avons notre fond clair et nous avons notre fond sombre. Aussi, nous allons avoir couleur-text-clair et couleur-text-foncé. Une couleur très basique pour le moment, mais nous pouvons aller et les remplacer par des codes hexadécimaux. avantage supplémentaire de l'utilisation de variables de couleur est que nous n'avons pas à nous souvenir de codes hexadécimaux fous. Si au lieu de noir une autre façon de représenter le noir est comme ça, vous pourriez avoir un code hexadécimal plus fou alors cela peut être quelque chose comme ça. Je ne sais pas que ça pourrait être n'importe quoi. Mais maintenant que nos couleurs sont définies ici, nous pouvons maintenant remplacer nos couleurs explicites par ces noms de variables. Cette couleur d'arrière-plan est la couleur d'arrière-plan sombre, donc je vais changer ceci ici, et c'est la lumière du texte juste ici. Nous voulons un texte de couleur claire sur un fond de couleur foncée. Ici, nous avons le fond de couleur claire et le texte sombre. On a le contraire. On a aussi ce gris. Je vais juste appeler cette couleur secondaire. Nous pouvons remplacer cela par la couleur-secondaire et la couleur-secondaire. Je vois que nous l'utilisons uniquement comme couleur d'arrière-plan, alors peut-être que je vais l'espacer un peu en mettant en arrière-plan ici, background-secondary. Une fois que cela recompile ce qu'il fait automatiquement, nous allons maintenant voir que nous avons exactement le même résultat dans notre CSS, mais nous avons des variables ici. Maintenant, ce que nous pouvons faire, c'est que nous pouvons changer le fond sombre et il sera mis à jour ici. Peut-être que nous voulons utiliser quelque chose de trépidant comme ça, du code hexadécimal, et maintenant vous pouvez voir que la couleur de fond de sombre nous ne l'utilisons qu'une fois ici, mais cela va se mettre à jour. Nous pouvons mettre à jour cette couleur texte-lumière, mais peut-être que cette couleur grise serait une meilleure à mettre à jour parce que nous l'utilisons à deux endroits. Passons ça à un gris clair à la place. Maintenant, vous pouvez voir n'importe où où nous utilisons cette variable est changée ici. Maintenant, cela est bien sûr pratique lorsque vous voulez changer l'aspect général de votre feuille de style en changeant des variables ou des couleurs à un seul endroit. Mais il a l'avantage supplémentaire de vous donner des noms lisibles à mettre dans vos attributs de couleur, surtout lorsque vous utilisez des codes hexadécimaux. Il y a eu de nombreuses fois dans des projets où j'ai dû rechercher le code hexadécimal que j'ai besoin d'utiliser pour certaines choses. Si j'utilisais SSAS, je pourrais simplement nommer cette couleur primaire quelque chose comme color-primaire, et chaque fois que j'utilise cette couleur dans mon document, je peux juste écrire color-primaire au lieu d'avoir à me souvenir d' un code hexadécimal qui est probablement ne sera pas aussi simple que #000. C' est un autre grand avantage des variables. La prochaine fonctionnalité que je veux vous montrer, et nous allons juste étiqueter ces fonctionnalités maintenant. Ceci est le cours numéro 1, imbrication, nombre 2 variables. Regardons l'extension/héritage. Cette troisième fonctionnalité, nous pouvons revenir aux docs, défiler vers le bas pour extend/héritage. Dit que c'est l'une des fonctionnalités les plus utiles de SSAS. Il vous permet de partager un ensemble de propriétés CSS d'une sélection à l'autre. Honnêtement, je ne pense pas que ce soit utile et je vais vous montrer pourquoi dans une seconde. Mais copions leur exemple et je vais vous montrer ce qu'il fait réellement ici. Mettons leur exemple ici. Ceci est un exemple de quelque chose qui n'a pas été appliqué donc je vais juste supprimer cela complètement. L' exemple que j'ai ici, un message. Si nous regardons ici le CSS compilé, nous avons ces quatre styles de message différents, qui partagent chacun ces trois propriétés. Mais selon qu'il s'agit d'un succès, d'une erreur ou d'un message d'avertissement, nous avons différentes couleurs d'arrière-plan ou de bordure. Comme vous pouvez le voir ici, nous n'économisons même pas autant d'espace en ayant SSAS. Si vous regardez ici, c'est à peu près la même quantité de lignes entre le CSS de sortie et l'exemple ici dans SSAS. C' est une raison pour laquelle je ne suis pas un grand fan. L' autre raison pour laquelle je ne suis pas un grand fan de étend est parce que je pense que nous pouvons simplement utiliser une classe de modificateur secondaire. Ce que je veux dire par là, c'est au lieu d'écrire tout cela, nous écrivons juste un message avec ces propriétés. Ensuite, nous pouvons faire tout cela sans l'extension. Ensuite, tout ce que nous devons faire dans notre HTML, est de nous assurer que nous incluons les deux classes. Nous incluons la classe de message, et nous incluons la classe d'erreur de succès et d'avertissement. Pour être clair, c'est un exemple de ssas-lang, puis mon exemple ici. Comme vous pouvez le voir ici, il produit une quantité similaire de lignes pour les deux. Si vous regardez mon exemple, il est une plus petite quantité aligne alors à partir du site Web de SSAS. Faites vos propres jugements. Mais la seule fois que je pense qu'il est vraiment logique d'utiliser des extensions dans SSAS est quand vous avez deux éléments qui devraient ressembler le même mais vous voulez vraiment que la classe soit différente. Peut-être que vous avez JavaScript attaché à cet élément ou peut-être pour une raison quelconque, il est plus logique sémantiquement d'avoir la classe différente, mais vous voulez que le style soit le même. Eh bien dans ce cas, il est certainement logique d'utiliser une extension. Mais il est rare que j'aie ces situations donc je suis plus fan d'écrire une classe de base et ensuite chaque fois que j'ai besoin de créer un élément, je peux juste avoir la classe de message et la classe de succès dessus. Si je veux rendre cela un peu plus clair, je peux avoir un message—succès, message—erreur, message—avertissement. Tant que je mets le message de la classe et le message - succès sur l'élément que je veux avoir les styles de message de succès, alors je vais bien. Nous pouvons en fait utiliser un exemple d'imbrication ici. On peut utiliser l'esperluette à la place. C' est une autre fonctionnalité que j'apprécie de SSAS que nous pouvons utiliser ici. Nous devons également les mettre en retrait. Alors, comme vous pouvez le voir, c'est beaucoup plus compact que d'écrire ceci. Configurez vos propres avis. Je n'ai pas l'impression d'étendre est aussi puissant, mais c'est là au cas où vous auriez besoin de l'utiliser. Une autre chose que vous pouvez faire dans SSAS est les opérateurs d'utilisation. Cela n'est pas particulièrement utile. EVA c'est juste une fonctionnalité de programmation que vous pouvez utiliser dans SSAS. Créons une nouvelle section pour les opérateurs. Laissez-moi faire défiler jusqu'aux opérateurs. Prenons cet exemple mot pour mot et mettez-le dans notre terrain de jeu. Les commentaires que vous créez ici dans SASS où il vient réellement dans votre CSS. En passant, ces commentaires CSS standard le seront. Donc, c'est la façon dont vous pouvez faire des commentaires en CSS et SASS, mais ce ne sont que des commentaires SASS purs. Donc ça ne viendra pas vraiment dans votre feuille de style finale, juste pour que vous le sachiez. En regardant cet exemple pour les opérateurs, nous avons notre conteneur avec une largeur de 100 pour cent et nous faisons des calculs ici pour comprendre la largeur de l'article et le côté à côté. Comme vous pouvez le voir, la sortie est le pourcentage final. Si j'ai supprimé ce pourcentage de la fin d'ici, vous verrez que les chiffres viennent avec l'unité. Donc nous avons besoin de ce pourcentage là juste pour définir l'unité, mais devrait être assez clair ce qui se passe ici. Nous prenons des valeurs absolues de 600 en 960, et nous en transformons un pourcentage. Maintenant, ces largeurs sont réactives, au lieu de seulement 600 et 300 basées sur une largeur de conteneur de 960. Si la largeur de ce conteneur était de 960, alors nous pourrions simplement enlever ceci et ce serait la même chose. Mais si nous voulons que ces conteneurs soient réactifs, alors nous devrions utiliser des pourcentages. Ce maths nous permet de l'utiliser. Encore une fois, pas une caractéristique essentielle de SASS. Je ne me trouve pas à écrire beaucoup de maths dans SASS, mais c'est une fonctionnalité cool que si vous en avez besoin. La dernière caractéristique dont nous parlerons dans cette leçon et c'est probablement là-haut dans les trois meilleures fonctionnalités de SASS est mixins. mixins sont des fonctions que vous verrez dans un langage de programmation, sauf que nous pouvons les utiliser dans SASS. Je vais juste copier un exemple ici et ensuite nous pourrons jeter un oeil à ce qu'il fait ici. Je vais coller dans ce flex de code mixin. Ce mixin comme une fonction dans n'importe quel langage de programmation, prend un argument ou un paramètre. Cette variable va entrer dans le mixin et peut être utilisée à l'intérieur du mixin. Ensuite, nous sommes en fait inclus le mixin. Jetons donc un coup d'oeil à ce que cela en résulte ici. Ce que nous avons ici est où placer ce numéro d'un dans notre élément flexible et nous le jetons dans cela presque comme un générateur, qui va nous donner ces quatre attributs avec ce nombre. O si je le change ici à deux, vous verrez qu'il se met à jour pour tous. Donc, l'avantage de ceci est par exemple, nous n'utilisions pas ce mixin et donc nous l'avons juste eu comme ça. Maintenant, disons par exemple, quelque chose a changé et nous voulons utiliser une valeur flex différente. Eh bien, on devrait aller ici, changer ça à quatre endroits différents. Dis trois là, trois là, trois là. C' est un peu inefficace et nous nous répétons plusieurs fois. Au lieu de cela, ce que nous pourrions faire est de finaliser ça dans un mixin. Nous savons que chaque fois que nous changeons flex, nous voulons changer ces versions préfixées aussi à la même valeur. Pourquoi ne pas utiliser un mixin ? Nous le faisons en mettant en plus le nom du mixin et ensuite nous pouvons passer ce paramètre dans. Maintenant, si nous faisons défiler vers le bas, nous voyons que nous obtenons le même résultat. Comme je vous l'ai déjà montré, nous avons juste besoin de changer un numéro et ça va le changer pour les quatre. Maintenant, c'est une introduction rapide des mixins, évidemment ils sont très puissants et nous pouvons les utiliser pour une variété de choses. Dans l'exemple, quand nous avons réellement une page Web HTML, je vais vous montrer une très bonne utilisation des mixins et de la pratique. En fait, je vais vous montrer les utilisations pratiques de toutes ces fonctionnalités dans la pratique. Mais pour cette vidéo, je voulais juste vous donner un aperçu des fonctionnalités et une démonstration de ce qu'ils font réellement. Maintenant, il y a une autre fonctionnalité ici. Nous avons fait des opérateurs, des extensions et des mixins, des variables d'imbrication. Il y a des partiels et des modules ici. Nous en parlerons dans une vidéo ultérieure parce que nous n'avons qu'un seul document ici. Nous n'allons pas apporter des partiels, mais des partiels, si nous revenons ici, nous pouvons réellement créer des fichiers SASS partiels qui contiennent de petits extraits. Nous pouvons modulariser SASS afin que nous puissions mettre nos variables dans un seul fichier. Nous pouvons mettre nos extensions même et ensuite dans un fichier, mettre des mixins dans un fichier, et ensuite nous pouvons les apporter. Mais nous verrons cela une fois que nous aurons réellement configuration SAS sur notre ordinateur et commencerons à travailler avec lui. C' est une introduction rapide au SASS. Si vous voulez en savoir plus à ce sujet, ce que nous venons de couvrir, vous pouvez consulter cette page sur le site Web de SASS. Une chose que je veux faire avant de passer à la vidéo suivante et installer SASS sur votre ordinateur est que je veux passer à SCSS. Si je clique sur ce bouton ici, maintenant tout ce que nous avons écrit est changé en SCSS. Comme nous l'avons mentionné, SCSS est tout comme SASS, mais pour l'imbrication, nous utilisons les accolades tout comme dans CSS. Nous utilisons des point-virgules pour définir la fin d'une règle. Au lieu d'égal et plus, nous utilisons des mots plus descriptifs comme avoir réellement un à mixin ici et écrire à include. L' avantage d'utiliser SCSS est qu'il est rétrocompatible avec CSS, donc je peux jeter dans CSS normal ici et il n'y aura aucun problème, il n'y aura aucune erreur. Peut-être que je veux mettre une famille de polices de Times New Roman sur le corps. Comme vous pouvez le voir ici, je devrais peut-être juste le mettre entre guillemets. Donc, comme vous pouvez le voir ici, il sort de la même manière dans votre fichier CSS de sortie. C' est vraiment bon parce que vous pouvez prendre tout cela que nous venons de générer et si je me débarrasse de ce que nous avons ici, et que je jette ce CSS mot pour mot dans notre SASS, cela ne vient pas avec des erreurs dans notre CSS. Donc on peut vraiment aller ici et refactoriser ça si on veut. Je peux entrer et faire un peu d'imbrication et vous verrez que nous avons l'avantage d'utiliser SASS, mais nous avons aussi la rétrocompatibilité avec CSS. C' est pourquoi la plupart des exemples que vous verrez en ligne utilisent SCSS. Pour le reste de cette classe, nous allons utiliser SCSS. SCSS signifie Sassy CSS, je crois. C' est quelque chose qu'ils ont développé après avoir fait la syntaxe SASS traditionnelle initiale parce qu'ils ont réalisé, je suppose qu'il était préférable de l'avoir ressemblé plus à CSS. Cela facilite l'écriture lorsque vous avez l'habitude d'écrire du CSS. Aussi comme mentionné, c'est rétrocompatible donc je peux juste jeter n'importe quel nombre de CSS dans un fichier SCSS et cela fonctionnera. C' est génial dans le cas où je veux juste écrire du CSS, mais je n'ai qu'un fichier SCSS. Les deux vont fonctionner dans le même fichier. Il y a beaucoup d'avantages à utiliser la version SCSS. Comme je viens de le dire, nous allons utiliser SCSS à partir de maintenant. Mais pour la plupart, il devrait en fait être plus facile à comprendre en utilisant SCSS car il ressemble plus à CSS. Vous m'avez probablement vu avant quand j'écrivais SASS, j'avais l'habitude de mettre des point-virgules. Je suis juste habitué à écrire des choses de manière CSS. Je pense que lors de l'utilisation de SASS, la syntaxe SCSS a juste plus de sens. J' espère que vous avez apprécié cette introduction. Dans la prochaine vidéo, nous allons installer des logiciels sur votre ordinateur et ce logiciel va compiler SASS pour nous. J' attends ça avec impatience. Je te vois dans la prochaine vidéo. 4. Configurer Sass sur votre ordinateur: Dans la dernière leçon, nous avons utilisé un outil en ligne, SassMeister, pour commencer à exécuter Sass in the Cloud ultra-rapide sans que nous ayons à installer Sass sur notre ordinateur. Je voulais le faire vite pour qu'on puisse voir les caractéristiques de Sass, avoir une bonne introduction. Mais maintenant, il est temps d'installer Sass sur votre ordinateur afin que vous puissiez réellement l'exécuter dans vos propres projets. Nous allons en fait utiliser un exemple de projet de ma page GitHub en seulement une seconde. Mais ce que je veux que vous fassiez est de cliquer sur ce lien pour l'installer, et apprenons comment nous pouvons exécuter Sass. Maintenant, comme vous pouvez le voir ici, il nous donne un tas d'applications différentes à regarder. Malheureusement, Sass ne fournit pas leur propre compilateur, par l'apparence des choses. Nous pouvons utiliser Sass sur la ligne de commande, mais en termes d'applications, vous avez un certain nombre d'options payantes et open source. La façon la plus simple que j'ai trouvé d'exécuter Sass sur votre ordinateur est d'utiliser Sass Live Compiler dans VS Code. Qu' est-ce que VS Code ? Eh bien, c'est juste un éditeur de codage qui est fourni par Microsoft. C' est en fait gratuit, ce qui est assez génial. Si je recherche VS Code dans Google, ce sera le premier lien, et comme vous pouvez le voir, il signifie Visual Studio Code. C' est un assez bon éditeur de code d'identification complètement gratuit et a quelques grandes extensions dedans. Vous n'avez pas nécessairement besoin d'utiliser cet éditeur de code et cette extension pour cette classe. Mais il y a tellement de façons différentes de le faire, et c' est la façon la plus simple que j'ai trouvée. Tout est gratuit, aussi automatique que possible, donc je le recommande certainement. Je suis évidemment sur un Mac, donc il va me demander de télécharger pour Mac, mais vous pouvez choisir l'option que vous voulez télécharger ici. Je l'ai déjà installé sur mon ordinateur, donc je n'ai pas besoin de faire autre chose. J' ai également le compilateur Live Sass déjà installé. Tout ce que vous devez faire pour cela est d'aller dans l'onglet Extensions de VS Code, tapez le compilateur Sass en direct, et installez celui ici. Compte tenu de cela, vous avez installé VS Code, et vous avez également cette extension installée, ouvrons un projet et voyons comment cela fonctionne. Vous pouvez ouvrir n'importe quel projet que vous voulez, ou vous pouvez aller à ma page GitHub, GitHub/Christopherdodd/SkillShare. Comme il est dit ici, ressources pour toutes mes classes sur SkillShare.com. Si vous avez fait quelques-unes de mes autres classes, vous devriez être familier avec ce dépôt. Ici, j'ai inclus celui-ci appelé Sass Class Project. Je veux que tu téléportes celui-là. Je vais le télécharger dans mon répertoire de code ici. Une fois que le téléchargement est terminé, nous voulons l'étendre. Maintenant, nous pouvons voir qu'il est élargi. Nous voulons aller dans VS Code, ouvrir ce dossier, un seul clic, puis cliquez sur « Ouvrir ». Débarrassez-vous de cet écran de bienvenue. Comme vous pouvez le voir, nous avons deux dossiers ici. Un index, qui contient notre page d'apprentissage, et notre feuille de style juste ici. Nous avons quelques points d'arrêt réactifs en bas, nous avons quelques composants et nous avons notre base et réinitialisé ici. Assez basique. La première chose que nous voulons faire est de cliquer sur Go Live ici, et cela va réellement créer un serveur automatique pour nous en utilisant VS Code. Je vais cliquer dessus. Maintenant, vous pouvez voir à quoi ressemble notre petit site Web. Il est entièrement réactif. Évidemment pas les couleurs les plus sexy, et il y a des revendications assez audacieuses ici. Cela peut ou non changer toute votre vie. Évidemment pas un rédacteur. Mais oui, c'est notre projet. Si vous le regardez sur iPhone, il est réactif. Oui, c'est avec ça qu'on va travailler dans les prochaines vidéos. Nous avons un serveur en direct en cours d'exécution, la prochaine chose que nous voulons faire est de regarder Sass aussi. Allons dans notre fichier CSS, et écrivons d'autres styles. C' est juste pour vous montrer qu'on peut le faire fonctionner. Nous avons d'autres styles ici et notre éditeur de code détectera automatiquement que nous avons maintenant un fichier SCSS, alors avez regardé Sass ici. Je vais créer une autre balise de lien ici juste copier et coller que d'autres styles, nous devrions appeler cela d'autres styles pas un autre style, otherstyles.scss. Maintenant, vous pouvez voir ici nous allons inclure ces styles ici. Nous allons également inclure otherstyles.css. Mais bien sûr, ce fichier n'existe même pas encore. On vient d'avoir d'autres styles.scss. On met ça là-dedans ? Bien sûr que non, parce que nous ne pouvons pas réellement exécuter SCSS dans notre navigateur. Ce qui va se passer ici quand nous lancerons Watch Sass, c'est que ce fichier va être généré pour nous en utilisant ce qui est ici. Maintenant, parce que nous n'avons rien fait ici, il n'y aura rien de généré ici à part un commentaire qui dit pas de CSS. Écrivons un peu de Sass. Une caractéristique de base est que nous pouvons imbriquer. Disons à l'intérieur du corps, à l'intérieur de la carte, et faisons juste quelque chose de dramatique comme la couleur de fond jaune important. Si je l'enregistre, il va détecter les changements. Que va-t-il se passer ici ? Vous pouvez voir que notre fichier CSS est généré instantanément. Si on retourne ici, tu peux voir ici que le jaune n'arrive pas. C' est parce que j'ai traité le corps comme une classe, pas comme un élément. Je sauve qu'il va rafraîchir le Sass et maintenant vous pouvez voir la couleur de nos cartes est changé en jaune comme vous pouvez le voir ici. Cool. Nous pouvons supprimer cela à tout moment. Ce n'est pas une grosse affaire parce que chaque fois que nous enregistrons des modifications à notre fichier SCSS, cela est régénéré. Nous avons seulement besoin de gérer le fichier SCSS. Mais bien sûr, la sortie CSS est ce que nous utilisons dans notre navigateur et nous avons un lien vers dans notre HTML. Supprimons simplement celui-là parce que c'était juste à des fins de démonstration. Je vais supprimer d'autres styles et toutes les références à cela. J' ai accidentellement supprimé tout le dossier là-bas. Néanmoins, nous avons maintenant Sass en cours d'exécution dans notre projet, et il compile automatiquement nos Sass et SCSS. Maintenant, bien sûr, si vous ne voulez pas utiliser VS Code et que vous voulez utiliser un éditeur de code, vous devrez regarder une solution différente. C' est le moyen le plus simple et évidemment complètement libre de le faire. Mais vous pouvez avoir vos préférences sur la façon dont vous souhaitez configurer vos outils de construction. Si vous avez vos propres préférences, malheureusement, je ne peux pas passer par toutes les différentes façons d'exécuter Sass sur votre ordinateur. Certainement, consultez ce lien de site Web. Vous avez quelques options ici, en fait, je pense est Koala et Scout-App gratuit, et vous pouvez aller sur leur site Web pour comprendre comment les exécuter. Mais j'ai trouvé que l'exécution du compilateur Live Sass sur VS Code est super simple. Tout ce que j'ai besoin de faire, c'est de lancer cette montre Sass et ça fait le reste pour moi. Si tout a fonctionné pour vous et que vous avez maintenant Sass compilé sur votre ordinateur, alors il est certainement temps de passer à la prochaine vidéo. Dans le prochain, nous allons réellement commencer à refactoriser ce CSS que j'avais auparavant dans SCSS. Nous allons tirer parti de certaines des fonctionnalités dont j'ai parlé dans la leçon précédente. J' ai hâte de vous voir sur le prochain. 5. Convertir les CSS en SCSS: Désolé pour le début de cette leçon, je nous ai ramenés à notre point de départ original dans le projet Sass Class. Je me suis débarrassé de ces autres styles.scss. Nous venons d'avoir notre fichier HTML et ensuite nous avons le fichier CSS lié. Tout comme dans la dernière vidéo, nous allons cliquer sur Go Live ici sur VS code pour exécuter le serveur, et maintenant vous pouvez voir notre site Web s'affiche. Ce que nous allons faire est de créer un fichier styles.scss ici. Ici vous pouvez voir le code VS a reconnu que nous avons un fichier SCSS, donc nous avons ce bouton Watch Sass ici. Je vais tout d'abord copier tous, de ces styles dans nos styles.scss. Économisez sur les deux, et maintenant je vais cliquer sur « Regarder Sass ». Maintenant, vous pouvez voir instantanément nous avons généré nos styles à nouveau, mais en utilisant SCSS. Comme vous pouvez le voir ici, il y a en fait quelques autres choses que le compilateur Live Sass a ajoutées. Plus particulièrement, nous avons quelques propriétés cross-browser ici. Display flex ne fonctionne pas sur certains navigateurs, donc il ajoute automatiquement la version WebKit et Microsoft afin que nous puissions maximiser la compatibilité du navigateur. Comme vous pouvez le voir ici, il a également ajouté quelques attributs qui ont été implicites par notre feuille de style, ce qui les a juste rendus très spécifiques ici. En dehors de ces changements, il s'agit exactement de la même feuille de style. Si nous retournons sur notre site Web et que nous actualisons la page, elle devrait ressembler exactement à la même chose, et c'est le cas. Ce que nous pouvons faire maintenant, c'est que nous pouvons fermer ce styles.css. Nous n'avons plus besoin de le regarder, et nous voulons juste travailler à partir de ce fichier styles.scss. Toutes les modifications que nous effectuons ici seront automatiquement compilées et placées dans ce fichier styles.css, et c'est le fichier, bien sûr, que notre document HTML utilise pour styliser la page Web. Mais nous n'avons pas besoin de nous préoccuper de ce fichier CSS généré. Nous pouvons simplement travailler avec le SCSS jusqu'à ce qu'il y ait un problème, auquel cas nous voulons jeter un oeil et voir quel CSS il génère. Mais jusqu'à ce moment, nous pouvons travailler complètement ici. Maintenant, comme je vous l'ai montré dans notre démonstration, la première chose que je veux faire est d'écrire quelques variables pour les couleurs. Il est préférable de les faire en haut de votre document. Au lieu de variables, je vais mettre des couleurs. Jetons un coup d'oeil aux couleurs que nous utilisons, et donnons-leur des noms. Ici, nous avons une couleur de fond de bleu. Si je regarde le document, la meilleure façon de décrire cette couleur bleue est que c'est la couleur primaire. C' est la seule couleur qui ressort. On a du noir, du blanc, qui ne sont pas vraiment des couleurs, et ensuite on a du bleu. Je vais nommer ceci au lieu de bleu, fond de couleur primaire. Maintenant, créons cette variable ici, couleur de fond primaire, et nous pouvons la définir en bleu. Passons à travers et trouvons d'autres références à cette couleur de fond bleu. Celui-ci a une couleur de fond légèrement différente. Ici, vous pouvez voir dans l'en-tête latéral, nous utilisons ce bleu. Nous pouvons le remplacer par notre nouvelle variable. Défilant vers le bas, nous pouvons voir que la carte a un fond de bleu. Nous pouvons changer cela en couleur arrière-plan primaire. Non, c'est la couleur de la police. Nous ne voulons pas changer ça, et je pense que c'est peut-être tout. Si nous enregistrons notre document, actualisons la page, vous verrez que rien n'a changé. Mais comme je vous l'ai déjà montré, si nous voulions changer cette couleur de fond primaire, peut-être que ce sera un bleu clair à la place, maintenant vous pouvez voir tous les arrière-plans ont été changés. Le prochain que je vais changer est la couleur de premier plan. Partout où il y a une couleur de police avec du blanc, je vais changer cela en color-police, disons brillant. Copiez ça. Écrivez-le ici. Faisons notre couleur de police lumineuse blanche. Changeons cela ici aussi, color-font-bright. Là où on parle de blanc, on le fait aussi ici. Ici aussi pour la section newsletter. Ici aussi, il y a en fait beaucoup de spots. La chose à retenir ici n'est pas simplement de remplacer chaque fois que vous voyez du blanc, il doit avoir du sens. Ce qu'on fait, c'est qu'on décrit la couleur ici. C' est important ce qu'on appelle ça. C' est notre couleur de polices vives. Pour une raison quelconque sur le web, vous verrez que la convention est d'écrire couleur, puis d'écrire les mots descriptifs après. Vous pouvez toujours mettre cela dans l'inverse, primaire background-color. C' est à vous de décider. C'est ainsi que cela se fait par convention. Quelles autres couleurs avons-nous ici ? Nous avons la couleur de notre corps de texte. Donc couleur-police, appelons-le primaire, et ce sera ce code hexadécimal particulier. Je vais placer cela en haut, et je vais juste les commander un peu gentiment ayant d'abord les couleurs de police, puis les couleurs de fond. Maintenant, nous pouvons remplacer celui-ci ici. Celle-là, nous traiterons un peu plus tard, et comme vous pouvez le voir ici, nous avons ces couleurs de fond de noir. Je vais créer une couleur-background-dark avec une valeur de noir. Maintenant, quand nous avons des arrière-plans sombres, je vais le remplacer par ma variable. Comme tel. Super. Maintenant, nous allons simplement vérifier avec notre document, assurez-vous que nous n'avons pas fait de grosses erreurs. Bien. Cette police primaire, je ne pense pas être le meilleur nom. Je vais l'appeler font-default à la place. Je veux continuer à décrire cette couleur ici, le bleu. Je vais appeler ce color-font-default. Encore une fois, comment vous nommez dépend de vous. Mais j'ai remarqué que presque tout le texte est bleu ou blanc, avec seulement cela en bas, est cette couleur grise, cette triple couleur sept. Je vais juste appeler cette police par défaut à la place. J' ai aussi remarqué ici que nous avons une couleur de police de ce bleu. Je veux appeler ceci une couleur-font-primaire à la place. Je pense que ce nom a beaucoup plus de sens. Je vais monter ici, color-font-primaire, bleu, et il y a encore une couleur ici. Nous n'avons pas nécessairement besoin de créer des variables de couleur pour toutes nos couleurs, juste là où cela a du sens. Ici pour les lumières de fond, couleur-background-light. Eh bien, disons brillant par souci de cohérence, et allons-y couleur-arrière-plan-lumière. Maintenant, nous avons défini nos variables. J' ai en fait une erreur ici dans notre console Live Sass Compilation. Apparemment, nous avons une variable indéfinie de couleur-background-bright. On y va. J'ai accidentellement appelé cette lumière. Vous pouvez l'appeler lumineux ou léger, juste quelque chose qui le décrit. On dirait qu'on est bons. Si je rafraîchis la page, tout va bien. C' est l'autre chose à noter est que s'il y a une erreur Sass, elle ne compilera pas dans le fichier CSS. Lorsque vous actualisez la page dans votre document HTML, vous ne verrez peut-être pas de changement, donc vous pourriez penser, oh oui, cela fonctionne. Mais alors vous vérifiez ici et vous réalisez que ce n'est pas en fait compiler les nouveaux changements. Il montre juste une ancienne version du fichier CSS. Ce que vous voulez faire est de vérifier périodiquement ici, assurez-vous qu'il n'y a pas d'erreurs Sass, et si jamais vous rencontrez quelque chose d'un peu funky, vous ne savez pas ce qui se passe, vous pouvez toujours vérifier la sortie CSS et assurez-vous qu'il se croise correctement. Nous avons nos variables ici, et cela nous rend plus facile de faire un peu de thème. Disons juste qu'au lieu d'avoir un fond noir, nous voulons créer tous les arrière-plans sombres en gris foncé, je pense que c'est une couleur, et maintenant vous pouvez voir que le contraste n'est pas le meilleur, mais nous pouvons réellement affecter tout le noir dans notre document CSS. Espérons qu'il devient clair maintenant les avantages de l'utilisation de variables. Numéro 1, nous pouvons changer la variable en un seul endroit, et numéro 2, nous donnons juste aux couleurs plus d'un nom descriptif. Aussi le numéro 3 est si nous avons un code hexadécimal comme celui-ci, nous n'avons pas à nous souvenir du code hexadécimal chaque fois que nous voulons utiliser cette couleur, nous pouvons simplement utiliser ce nom à la place. Ce sont quelques avantages de stocker vos couleurs dans des variables. Maintenant, comme nous l'avons vu auparavant, nous avons cette couleur supplémentaire ici, qui n'est pas assignée à une variable. La raison en est que cette couleur est exactement bleue mais plus foncée de 20 pour cent. C' est exactement cette couleur assombrie de 20 pour cent. Pour cela, nous pouvons réellement utiliser une fonction. Nous avons vu des mixages dans Sass, mais il y a aussi des fonctions intégrées. Allons en fait sur le site et regardons celui-ci. Je vais aller à la boîte de recherche ici. Peu importe la page que vous êtes sur le site Web de Sass et je vais chercher assombrir. Je vais cliquer sur le résultat pour assombrir, et comme vous pouvez le voir ici, il prend comme premier paramètre une couleur particulière, puis il prend comme deuxième paramètre combien vous voulez assombrir cette couleur. Comme vous pouvez le voir ici, quelques exemples, vous pouvez également désaturer, il y a beaucoup de fonctions différentes. Si vous voulez aller vérifier cette page, vous pouvez colorier, ajuster de plusieurs façons différentes. Mais assombrir est assez facile. Je vais juste prendre la couleur ici, la couleur background-primaire, revenir à l'endroit où est sombre, et le second paramètre, je vais mettre 20 pour cent. Sauvons. Maintenant, rappelez-vous que c'est sur un état de survol, donc si je retourne à ma page Web, et actualise la page, nous devrions voir cette même couleur s'assombrir de 20 pour cent lorsque je passe la souris sur le bouton, et répéter cela à nouveau, c'est bon pour utiliser une variable ici, parce que si nous changeons cette couleur d'arrière-plan primaire à autre chose, comme un bleu clair par exemple, et actualisons la page. Malheureusement, nous avons une erreur ici, j'ai oublié de mettre mon signe $. Si nous actualisons la page, vous verrez qu'elle assombrit la couleur par défaut de ce bouton, sorte qu'elle réagit à la couleur stockée dans cette variable. Si nous n'avions pas de variable. Remettons cela en bleu, et assurons qu'il y a des signes $ là-dedans. Si nous n'avons pas utilisé cette fonction, et nous avons juste utilisé ce que j'avais avant. Si nous devions changer la couleur de la couleur background-primary en bleu clair, vous verrez que c'est toujours la même couleur que nous avons spécifiquement définie, donc la fonction foncée en utilisant une variable est un bon moyen d'obtenir la même couleur que ce vous avez stocké dans la variable, mais juste manipulé d'une certaine manière. Aller à réécrire cela à nouveau, assombrir la couleur, background-primaire 20 pour cent, et il est également bon de lire aussi bien. Nous pouvons voir que c'est la couleur background-primaire, mais 20 pour cent plus sombre. Peu importe ce que cette couleur est, quand vous passez la souris dessus, il va la couleur de 20 pour cent, assez cool. Je vais changer ça en bleu parce que le bleu clair est trop clair, et nous avons retrouvé notre couleur bleue. La prochaine fonctionnalité SAS que je veux vous montrer dans ce petit projet est des étendues. Comme je l'ai déjà mentionné, je ne suis pas un grand fan des étendues. Je pense qu'il n'y a que quelques situations dans lesquelles vous devez vraiment l'utiliser. Mais nous avons une situation ici avec les boutons que nous pourrions refactoriser pour utiliser des étendues, alors faisons-le maintenant. Si je vais dans mon index.html, nous pouvons voir ce que j'ai fait est inclus deux clauses sur chaque bouton, donc nous avons notre bouton CTA juste ici, et ici nous avons notre bouton newsletter. Au lieu d'utiliser des étendues, ce que j'aime faire est juste d'ajouter une classe de niveau de base, sorte que vous pouvez le voir, ils ont tous les deux des noms de classe différents en termes de soulignement de la newsletter, bouton de soulignement, et l'autre est CTA soulignement, bouton de soulignement. Mais les deux ont une deuxième classe sur eux, ce qui leur donne les styles de bouton de base. Mais l'idée derrière l'utilisation d'une étendue dans SASS est que nous avons seulement besoin d'utiliser une classe, donc si je supprime simplement btn, la deuxième classe de ces deux, et sauvegardez cela. Revenez ici, et vous pouvez voir que nous avons perdu les styles de niveau de base pour nos boutons ici. Ce que je vais faire est de retourner dans notre fichier CSS ici, et au lieu d'avoir une classe pour bouton, je vais transformer cela en une étendue, donc ici, et pour l'état de vol stationnaire, je vais transformer cette dans une extension, et puis pour chacun de ces boutons, nous pouvons inclure ce CSS, donc ici dans le bouton CTA, je vais écrire étendre btn, et puis je vais faire la même chose pour l'autre bouton de newsletter. Je peux l'étendre ici. Enregistrer, rafraîchir ici, ou en fait il a été rafraîchi pour nous, et vous pouvez voir que nous avons obtenu exactement le même résultat qu'avant. Comme vous pouvez le voir, nous n'avons pas vraiment fait beaucoup d'économies en termes de lignes de code. Mais ce que nous avons fait est de réduire le nombre de clauses que nous devons utiliser sur un élément particulier. Je ne pense pas nécessairement que ce soit une grosse affaire, mais il a certainement ses mérites, et c'est une caractéristique de SAS dont vous pourriez vouloir profiter. Laissons-le avec l'implémentation SAS pour l'instant. La dernière chose que ce fichier CSS bénéficierait vraiment de nous et de mixins. Une grande utilisation de mixins est pour créer vos requêtes de médias de fer. Si je fais défiler ici, j'ai des requêtes multimédias pour plusieurs tailles d'écran différentes, et je les ai déjà étiquetées avec une variable que nous allons utiliser dans nos mixins, donc ici, c'est la requête multimédia pour les tailles d'écran larges, et comme vous pouvez le voir, j'ai quelques styles là-dedans. C' est comme les tailles d'écran moyennes, moyennes de bureau et les tailles d'écran larges. Juste toutes les tailles d'écran de bureau, alors vous avez des tailles d'écran de tablette, et des tailles d'écran mobiles. Certains d'entre eux ont des styles, certaines de ces définitions d'arêtes que je veux avoir juste au cas où j'aurais besoin de les utiliser, mais ce sont les points d'arrêt que j'ai configurés. Maintenant, comme vous pouvez le voir, nous pouvons toujours juste, si nous voulions dire, par exemple, avoir un style différent pour le corps du code à travers l'un de ces points d'arrêt, nous pouvons juste le jeter dans ce que nous avons fait ici en fait sur notre nous avons réduit la taille de la police sur le corps du code, mais il y a une meilleure façon de le faire avec CSS, et c'est ce que je veux vous montrer dans cette vidéo. Ce que je vais faire, c'est, déplacer tous ces points d'arrêt réactifs vers le haut, puis nous allons les transformer en SASS, donc je vais créer un commentaire ici, des requêtes média, et collons ces ici. Cela va le casser si nous sauvegardons cela et l' exécutons ici à cause de la commande de notre CSS, cela va être ordonné de manière incorrecte, donc nous allons commencer à voir les choses. Peut-être pas, mais il y a une chance que ça tombe en panne parce qu'on a changé la commande. Mais ce qu'on va faire ici, c'est que nous ne laisserons pas ces questions médiatiques ici. Nous allons juste les avoir ici pour référence afin que nous puissions écrire nos propres mixins qui génèrent des requêtes média pour nous. Il y a un certain nombre de façons que nous pourrions faire cela, nous pourrions créer un mixin pour chaque taille d'écran de point d'arrêt unique, ou nous pouvons en créer un et utiliser une instruction if pour déterminer à quelle largeur d'écran appliquer, donc j'aime l'approche if then, donc je vais le faire, et ce que cela nous permet de faire est simplement d'écrire une requête multimédia de code mixins. J' ai vu cela étiqueté comme beaucoup de choses différentes dans le passé, vous pouvez l'appeler répond à, ou la taille de l'écran, ou tout ce que vous voulez l'appeler. J' aime l'appeler requête multimédia parce que c'est exactement ce que c'est, et pour le paramètre, nous allons mettre en taille. Je vais ouvrir ces mixins, et je vais écrire ma première déclaration if. Comme vous pouvez le voir ici, j'ai déjà donné des noms à toutes ces plages de largeur d'écran, donc nous pouvons réellement l'utiliser comme notre attribut ici, donc je vais créer une instruction if en utilisant la syntaxe ici de, si la taille W est égale à la largeur du bureau, nous n'avons pas besoin d'utiliser à nouveau le signe $, ou de mettre ceci entre guillemets, alors nous voulons que la requête média d'ici s'applique. Je vais juste copier et coller cela, et ce que nous faisons pour obtenir le contenu à montrer ici est de simplement mettre dans cette balise de contenu spéciale. Vous verrez comment cela fonctionne en une seconde. Maintenant, je vais créer une instruction else if, et si la taille va être moyenne Bureau. Ensuite, la requête multimédia que je vais utiliser est la suivante. Encore une fois, ce que nous devons faire pour clore cela et mettre du contenu. Le prochain point d'arrêt que nous allons mettre. Nous pouvons vraiment nous en débarrasser maintenant parce que nous n'avons pas vraiment de styles là-dedans. Faisons ce support de bureau M large. J' ai oublié de mettre les égaux ici. Rappelez-vous les gars, vous n'avez pas besoin de les nommer exactement de la même façon que j'ai nommé le mien. J' ai défini mes points d'arrêt, comment je les aime. Vous n'avez pas besoin d'utiliser le support de bureau M-wide dans les largeurs d'écran spécifiques. C' est comme ça que je l'ai mis en place. Vous pouvez utiliser ce que vous voulez ici. Contenu, de sorte que l'on n'a pas non plus de styles, donc je vais juste supprimer celui-là. Ensuite, nous avons le bureau, défilant vers le bas, copiant à nouveau le fermer, en nous assurant que nous avons cette balise de contenu là-dedans. Celui-ci n'a pas de règles de style dans l'un ou l'autre, donc je peux juste supprimer cela. Ensuite, on a une tablette. Sinon, si la taille est égale, égale tablette. Je suis en train de copier le collage. Dans la balise de contenu, je ne supprimerai pas celui-ci car il y a quelques styles et finalement nous avons notre point d'arrêt mobile ou la plage de taille d'écran. Je vais écrire autre si la taille est égale à mobile et jeter dans notre dernière balise de contenu là-bas. Maintenant, nous avons toutes ces largeurs d'écran définies dans cette requête multimédia unique. C' est la mise en place du mixin. On ne l'a pas encore utilisé. Maintenant que nous les avons mis en place, nous pouvons réellement utiliser ce mixin. Vous pouvez voir comment cela va rationaliser la façon dont nous écrivons des requêtes multimédias. Ce que je vais faire, c'est que je vois ici que j'ai un style différent pour la taille de police de l'en-tête CTA lorsque nous sommes sur l'ensemble du bureau. Laisse-moi juste prendre cette taille de police. Allons vers le bas et trouvons le titre de soulignement du CTA. On y va. Voici la taille de police par défaut. Mais bien sûr, nous voulons qu'il apparaisse cinq pixels plus grands sur un large écran. Ce que nous pouvons faire ici, c'est utiliser notre mixin nouvellement créé. Je vais écrire inclure. Voici comment vous incluez un mixin. Inclure une requête multimédia. Je crois que le point d'arrêt était à l'échelle du bureau de code Il y a le premier là-bas et jetons cette taille de police alternative. Sauvegardez cela, pas d'erreurs dans notre console. Voyons si ça a vraiment fonctionné. Je vais ouvrir nos outils responsive et cliquer sur une très grande taille d'écran. Celui-ci est un écran très large de plus de 2 000 pixels. Si je clique avec le bouton droit de la souris pour inspecter l'en-tête CTA, vous pouvez voir que ce style réactif s'applique maintenant sur la valeur par défaut. activant et en désactivant cela, vous pouvez voir que sur des écrans plus larges, nous avons rendu le CTA un peu plus grand. Ça marche. Maintenant, passons en revue et refactorisons le reste de notre code pour utiliser ce mixin de requête multimédia. Nous pouvons supprimer celui-ci maintenant et pour notre en-tête de newsletter, nous allons changer la taille de la police sur les écrans larges du bureau. Était-ce le titre de soulignement de la lettre d'information ? Allons ici et écrire » inclure le bureau de requête multimédia large à partir d'une autre taille de police ». Maintenant, nous pouvons nous débarrasser de cette requête multimédia complètement. Passons maintenant aux tailles d'écran de la tablette. Ce que nous faisons ici, c'est sur la taille de l'écran de la tablette. Nous allons rendre la taille de la police plus petite sur le corps de soulignement de la carte. Ici, couper le soulignement corps, aller jeter dans la requête média, croire que c'était une tablette, et voilà. La taille de la police sera désormais plus petite pour le corps de la carte sur les tailles d'écran de la tablette. On peut retourner ici, enlever celui-là. Nous pouvons également supprimer ce commentaire. Maintenant, nous venons d'avoir nos tailles d'écran mobiles. Une ligne flexible, nous allons changer la direction de flexion. Ligne flexible « inclure la requête multimédia mobile ». Vous pouvez voir ici, c'est beaucoup plus lisible. Voici les styles pour la ligne flexible. C' est ce qu'il a par défaut. Mais sur une taille d'écran mobile, nous voulons que la direction flexible soit colonne. C' est beaucoup plus agréable, je crois que de les écrire encore et encore et encore. Nous avons comment les points d'arrêt définis et les étiquettes avec de beaux noms. Nous pouvons simplement les jeter dans le CSS en ligne et nous avons tout regroupé assez bien. J' espère que vous commencez à voir ça maintenant. Finissons le reste de tout ça. On a une carte, pas le dernier enfant. Nous voulons que la marge inférieure soit de 15 pixels, et nous devons en créer un nouveau pour cela. Carte, nous y allons, pas dernier enfant, et puis nous allons « inclure la requête des médias mobile ». L' autre façon d'écrire ceci est comme tel. Tu pourrais l'écrire dans l'autre sens. Mais nous allons réellement refactoriser cela en utilisant l'imbrication dans une seconde. Je vais l'écrire comme ça pour l'instant. Je vais enlever ça. Maintenant, nous avons juste un dernier style. Titre du trait de soulignement de l'en-tête de tiret de site. Je crois qu'on n'a pas cette configuration non plus. Nous allons aller sur le site, puis inclure les médias requête mobile et lui donner ce rembourrage. Maintenant, nous pouvons supprimer toutes nos requêtes médiatiques parce que tout est maintenant géré par notre mixin ici. Sauvegardons juste vérifier comment Sass console ici. J'ai l'air bien. Rafraîchissez notre page et nous devrions maintenant voir que tout fonctionne exactement de la même manière. Mais c'est juste beaucoup plus agréable à lire en termes de la façon dont nous avons écrit notre code. C' est beaucoup plus facile à gérer. On y va. Tout en termes de réactivité fonctionne encore. Nous avons pleinement tiré parti de la puissance de ce mixin ici. Maintenant, la dernière fonctionnalité que je veux vous montrer dans cette leçon est l'imbrication. Évidemment, nous avons vu imbriquer dans la première leçon où nous, avons essayé dans SassMeister, mais ici dans un projet réel, où pouvons-nous réellement trouver des opportunités pour nicher ? Eh bien, dans mon projet particulier, ce que j'ai fait est utilisé un code de convention de nommage CSS BEM. BEM signifie modificateur d'élément de bloc. C' est ce que ces doubles soulignements bizarres sont au cas où vous vous demandiez. Si vous utilisez BEM, nous allons juste chercher BEM maintenant. Vous pouvez aller sur leur site Web et apprendre comment cela fonctionne. Je suis un grand fan de BEM. Je pense que c'est génial. Mais l'une des caractéristiques de BEM est qu'il a intégré l'imbrication. Dans ce projet particulier, je n'ai pas vraiment besoin d'imbriquer parce que comme vous pouvez le voir, le trait de soulignement est de faire l'imbrication pour nous. Tout ça fait partie de la convention de dénomination. Mais ce que je vais faire en une seconde, c'est que je vais supprimer ces classes BEM et nous pouvons voir comment nous pouvons utiliser l'imbrication dans ce projet. Dans le cas où vous ne vouliez pas réellement utiliser cette convention de nommage de classe BEM. Ce site est getbem.com Si vous voulez en savoir plus sur BEM, quelque chose que j'ai utilisé pour la dernière année et j'aime vraiment, mais pas tout le monde est un fan de BEM. Fais certainement tes recherches sur celui-là. Une chose que nous pouvons faire malgré l'utilisation de BEM dans ce projet est d'utiliser des esperluettes. Il y a quelques endroits dans notre code ici où l'utilisation d'une esperluette a beaucoup de sens. Permettez-moi de passer par là et de voir où nous nous répétons. Ici, nous pouvons voir un exemple classique de l'endroit où une esperluette a du sens. Nous avons notre extension ici, signe de pourcentage, BTN défini deux fois. Ce que nous pouvons faire à la place, c'est que nous pouvons tout copier après cette seconde BTN, et ensuite nous pouvons entrer dans la règle BTN et utiliser une esperluette. Maintenant, nous allons obtenir exactement le même résultat. C' est juste plus gentil et plus propre. Repassons à travers, voyons où on peut l'utiliser d'autre. Si nous le voulions, en fait, nous pourrions aller ici et nicher comme ça. Cela n'ajoute pas trop, mais c'est une option, donc si je l'enregistre, actualise la page ici, nous obtenons le même résultat, donc ce que nous avons fait c'est que nous utilisions déjà le point CTA ici, ce que nous pouvons faire, c'est simplement insérer cela dans l'ensemble des règles de la LTC et faire référence au nom des parents, en utilisant cette esperluette. Certaines personnes aiment ça comme ça, certaines personnes ne l'aiment pas vraiment comme ça, donc je vais le remettre comme c'était en fait parce que je pense que c'est un peu plus gérable comme ça, que l'option est là pour utiliser des esperluettes lorsque vous nommez vos classes dans BEM également, il y a un autre exemple que j'ai vu plus tôt que je veux réparer ici est celui-ci. Donc, où mettre un pseudo-sélecteur sur cette carte, donc nous n'avons vraiment pas besoin d'une autre définition ici, donc ce que je vais faire est d'utiliser une esperluette et de l'imbriquer à l'intérieur de ce composant de carte là-bas. En enregistrant, actualisez la page car cela va sur cette taille d'écran mobile pour vous assurer qu'elle fonctionne. Désolé, iPhone X, et si nous inspectons une carte qui n'est pas le dernier enfant, qui est celui-ci ou celui-ci, vous pouvez voir que nous avons toujours ce style à travers l'esperluette, mais évidemment cela ne s'applique pas à la dernière carte. Donc, comme je l'ai mentionné précédemment, ce projet utilise BEM, donc l'imbrication est prise en charge pour nous par cette convention avec les doubles traits de soulignement, mais disons par exemple, nous avons supprimé tous les éléments de nos blocs. Le concept cool dans BEM est que vous avez votre bloc juste ici, puis à l'intérieur de votre bloc vous avez des éléments. La façon de nommer vos éléments est de les préfixer avec le nom du bloc, suivi d'un trait de soulignement. Mais disons simplement que nous n'aimons pas BEM et que nous allons simplement les supprimer complètement. Donc, je vais me débarrasser de tous ces sélecteurs de niveau d'élément, plus de corps de carte, plus de titre de carte, je pourrais avancer rapidement à travers cela parce qu'il y a assez de cas ici, nous sommes fondamentalement juste enlever tout ce qui utilise cette convention de nommage double soulignement. J' ai supprimé tous les sélecteurs de niveau d'élément en dehors de celui-ci, et en dehors de celui-ci ici, parce que c'est un div dans un div, donc je vais juste laisser celui-ci ici, vous pouvez aussi le nommer comme ça aussi. Alors sauvegardons et actualisons notre page et nous devrions voir que notre mise en page est maintenant cassée. Donc, la mise en page est en fait correcte, mais beaucoup de nos styles sont cassés. Maintenant, ce que nous pouvons faire est d'utiliser l'imbrication au lieu de BEM. Donc juste ici pour la direction du CTA, le cap que nous avions est juste un h2. Donc, au lieu d'avoir la tête du CTA, ce que je peux faire est que je peux prendre tout cela et juste cibler l'élément h2 dans notre CTA. Même chose avec le bouton, notre bouton est simplement un, une étiquette. Donc je peux aller ici, copier tout ça, et imbriquer nos règles pour l'étiquette, là-dedans. Maintenant, notre section CTA devrait revenir à ce qu'il était avant, oui maintenant faisons la même chose avec la section newsletter, donc nous avons notre rubrique newsletter juste ici, qui est un h2, qui est un h2,comme nous l'avons fait avec le CTA donc je vais prendre tous ces styles ici et ensuite l'imbriquer ici. Donc, tout h2 dans un div de newsletter ou un élément de newsletter aura maintenant les styles. même chose vaut pour le formulaire de newsletter, donc nous pouvons juste cibler l'élément de formulaire réel ici par son nom d'élément plutôt qu'une clause particulière, donc la forme, et ensuite la même chose avec l'entrée et le bouton, donc nous pouvons faire l'entrée, Je crois que c'était un élément de bouton, donc nous pouvons juste utiliser un sélecteur d'élément ici, déplacer tout cela, et voyons si notre newsletter semble bien, oui, ressemble exactement à ce qu'il était avant, donc je vais juste avancer rapidement maintenant et faire le reste de la cohérence. Ce dernier exemple de composant de carte ici est un exemple parfait de la raison pour laquelle j'aime utiliser BEM. Vous pouvez voir ici que pour nos autres, il était facile de cibler des éléments, particulier dans notre div de newsletter et notre div CTA, car ils étaient tous des noms d'éléments différents. On a h2, on a une balise de paragraphe, et on a une balise. Ici, dans notre newsletter, nous avons un formulaire, nous avons une balise d'entrée, et nous avons une balise de bouton. Le cas dans nos cartes est que nous utilisons des divs à l'intérieur de notre div. En fait, les clauses ont vraiment aidé à les différencier. Au lieu de cela, en utilisant cette approche de ne pas écrire de classe supplémentaire et en utilisant Sass, j'écris quelque chose qui est un peu plus sale, qui cible les divs par leur position à l'intérieur de cet élément de carte. Comme vous pouvez le voir ici, lorsque vous le lisez, n'a pas autant de sens que la classe BEM avant, il y a d'autres options ici, nous n'avons pas besoin de supprimer toutes les classes parce que les classes sont utiles, mais un meilleur exemple est juste ici où disons par exemple, nous ne voulions pas écrire un nom de classe pour certains de ces éléments, et nous ne pouvons pas les cibler uniquement par le nom de l'élément, nous pourrions toujours le faire avec Sass. C' est un exemple ici d'utilisation de cette fonctionnalité d'imbrication. Nous avons notre document exactement le même qu'avant, mais nous l'avons refait pour utiliser Sass. Espérons que vous commencez à voir maintenant comment nous utilisons certaines fonctionnalités de Sass pour écrire CSS d'une manière plus simple et plus succincte. Peut-être sur un petit projet comme celui-ci, les avantages sont particulièrement clairs, mais quand vous avez un fichier CSS de plusieurs milliers de lignes, alors cette structure et avoir des fonctionnalités comme des mixins et des variables deviennent très importantes. Il y a une autre fonctionnalité que je veux vous montrer dans Sass cependant, et c'est des partiels. Donc, nous pouvons réellement diviser des parties de notre fichier SCSS ici en différents fichiers et les apporter quand nécessaire. Mais pour cela, je vais attendre la prochaine vidéo dans laquelle nous allons examiner la modularisation de notre fichier SCSS. Je te vois dans la prochaine vidéo. 6. Écrire du Sass modulaire: Dans cette leçon, nous allons parler de modularisation notre document [inaudible] en différents, ce qu'on appelle partials dans SASS. Cela fait partie d'un plus grand sujet autour de l'architecture CSS, qui dans notre cas ici, exécution d'un fichier SCSS, nous avons moins de 200 lignes, n'est pas énorme, mais cela devient très important quant à la façon dont vous structurez vos projets SASS lorsque vous commencez à avoir des feuilles de style de milliers et de milliers de lignes. Donc, nous aurions pu facilement couvrir cela dans la leçon précédente comme une fonctionnalité supplémentaire et un moyen de refactoriser CSS, mais je voulais lui donner une leçon dédiée ici parce que, c'est un sujet qui devrait être considéré en soi. Donc, ce que je vais faire, c'est que nous allons d'abord moduler notre document et ensuite nous allons voir comment nous pourrions le faire pour un projet plus vaste. D'accord. Donc, comment nous faisons une partie dans SASS, est-ce que nous créons un nouveau fichier et nous nous assurons que ce fichier commence par un trait de soulignement. Donc, une partie commune pour commencer est de mettre des variables dans sa partie de fer. Donc, je vais avoir une partie avec le nom des variables .scss. Alors ce que je vais faire, prendre toutes nos couleurs, les déplacer ici. Si nous revenons à notre document ici, vous verrez que rien n'a changé. Mais si nous descendons ici, vous verrez qu'il n'a pas réellement compilé le nouveau document CSS parce qu'il manque toutes ces variables de couleur. Donc, nous devons réellement importer cette partie dans ce document, et la façon dont nous le faisons, est de mettre une déclaration d'importation ici, et tout ce que est de mettre une déclaration d'importation ici, nous avons à faire est d'ouvrir des guillemets, des variables d'entrée dans. Nous n'avons pas vraiment besoin de mettre le trait de soulignement ou le point SCSS à la fin. Si je fais défiler vers le bas, vous verrez que nous sommes tous bons. Actualisez la page. On est tous bons. Donc, en ce moment, nous avons exactement la même sortie. Nous sommes en train de moduler notre SCSS pour qu'il soit organisé dans différents compartiments. La prochaine chose, c'est les mixins. Donc, je vais créer une citation partielle underscore mixins.scss. Ensuite, faisons la même chose avec notre mixin de requête multimédia. Donc, je vais écrire, importer des mixins, enregistrer ça, et ensuite apporter ceci ici. Regardez vers le bas la console L SASS, aucun problème détecté, et si nous actualisons la page et commençons à contourner nos points d'arrêt réactifs, je peux voir un problème, et c'est de la leçon précédente où nous avons oublié de cibler ce H1. Donc je vais juste corriger ça maintenant. Nous avons toujours le titre d'en-tête latéral ici. Donc, au lieu de cela parce que nous n'utilisons plus BM, nous allons juste cibler l'élément, et nous allons évidemment exploiter cela là-dedans. Sauvegarder cela, va maintenant voir cela. Nous avons les mêmes résultats exacts, mais nous avons maintenant un mixin et des variables compartimentées dans leurs propres petits fichiers SCSS. Nous pouvons également aller un peu plus loin et mettre nos styles de base en partie aussi. Donc, nos styles de base, des choses qui affectent l'ensemble du document CSS et forment la base de nos styles. Donc, dans ce cas, ce serait L Astérix, et L. corps. Donc je vais jeter ça ici et importer la base. Une autre partie, nous pourrions faire nos éléments de mise en page L, donc, nous avons ligne flexible, largeur de page et centre de texte. Un centre de texte est en fait plus d'un utilitaire, je crois qu'une mise en page. Alors prenons ces deux-là et créons un partiel pour eux. L' ordre dans lequel vous faites ça n'a pas vraiment d'importance. Donc, je vais appeler cette mise en page, et puis je vais le créer, soulignement layout.scss. C' est à vous de décider comment vous voulez faire cela au fait. Je suis la convention en ce moment, et nous verrons dans la prochaine vidéo comment Bootstrap, un framework CSS populaire le fait , mais en ce moment je mets ma page avec le drier MI flex dans la mise en page partielle ici. Donc, comme vous pouvez le voir, rafraîchir la page, nous avons le même résultat. Nous pouvons également mettre des composants L dans leur propre partie. Donc, je vais prendre tout cela et mettre cela dans une partie par le nom des composants. Créons un nouveau fichier pour celui-là, CSS. Honnêtement, nous pourrions aller jusqu'à ce que tout cela soit dans leurs propres partiels, mais nous n'avons pas besoin de devenir trop fous. Je crois qu'en fait, nous devrions avoir un bouton , est un élément particulier, donc, nous devrions le mettre ici aussi. Nous avons donc le composant de la carte et le composant de bouton. Actualisez la page sur celle-ci. Tout semble toujours fonctionner et nous n'avons pas d'erreurs SASS. D'accord. Maintenant, ce que nous avons fait, c'est que nous avons divisé notre fichier .scss stylesen plusieurs fichiers, et cela le rend juste plus facile. Si nous cherchons un composant, nous pouvons aller dans les composants, si nous cherchons des styles de base, nous pouvons y aller, chercher des mixins ici, variables ici, ainsi de suite, ainsi de suite. Maintenant, comme je l'ai mentionné avec un petit projet comme celui-ci, ce n'est pas si important. Je mettrais certainement vos variables et mixins dans leur propre partie, mais pour décomposer les choses en composants, en mise en page et en base, sur aussi essentiel que cela pourrait l'être dans un très grand projet. Donc, comme je l'ai mentionné, il y a quelques conventions à suivre ou à ne pas suivre. Si vous finissez par développer votre feuille de style ou travailler sur un grand projet. L' une de ces conventions est appelée l'architecture 7-1. Si je cherche juste cela dans Google, vous pouvez voir ici il y a une page sur GitHub sur SASS 7-1, il y a aussi beaucoup d'articles sur le sujet, mais vous pouvez voir ici un exemple du brevet 7 -1. Donc, comme vous l'avez vu dans notre document ici, nous avons juste fait une partie pour la base, une partie pour les composants, une partie pour la mise en page. Mais si vous aviez un projet encore plus grand, ces composants, mises en page et base, cela pourrait être un dossier réel, et alors vous pourriez avoir des partiels à l'intérieur. Ainsi, par exemple, je pourrais transformer mon composant partiel en différents composants dans le répertoire d'un composant. Donc, je pourrais entrer ici, et au lieu d'avoir ces composants appelés, je pourrais l'appeler carte, et je pourrais placer cela dans le répertoire des composants. Oui, je suis sûr que je veux bouger, et puis bien sûr, nous avons aussi un bouton ici, donc, nous ne voulons pas cela, donc, déplacez ça d'ici, créez une nouvelle partie dans notre répertoire de composants pour un bouton comme tel, et ensuite nous pouvons inclure les deux, comme tel, ou si nous le voulions, nous pourrions créer un autre fichier SCSS à l'intérieur ici et importer nos différents composants dans ce fichier, puis importer ce fichier dans le fichier principal feuille de style. Encore une fois, ce serait exagéré pour ce type de projet, mais lorsque vous travaillez sur des applications à plus grande échelle, vous aurez certainement besoin de comprendre comment structurer votre CSS mieux. Il n'est pas rare lorsque vous travaillez sur une grande application pour voir des photos et des photos de différents composants. Nous verrons en fait dans la leçon suivante en utilisant Bootstrap, combien de fichiers SCSS différents sont dans ce cadre. Vous verrez donc un exemple en direct dans la vidéo suivante. Donc, pour l'instant, c'est tout ce que je veux faire avec la modularisation de notre projet ici. Comme mentionné, il s'agit de petits projets, donc, nous n'avons pas besoin de faire beaucoup de cela, mais c'est une autre fonctionnalité cool de SASS et devient très important comme mentionné lors de l'écriture de grandes applications. Dans la prochaine vidéo, nous allons regarder Bootstrap. Bootstrap est un framework CSS qui utilise SASS, et nous pouvons réellement voir comment un cadre SASS approprié est structuré. Il rassemblera certains des concepts que nous avons appris dans cette classe. Aussi, nous allons apprendre comment nous pouvons réellement utiliser Bootstrap, et je vais nouvelles connaissances de SASS pour réellement modifier Bootstrap et faire ce qu'on appelle le thème personnalisé. Donc je suis excité pour cette leçon. Je te vois dans la prochaine vidéo. 7. Bonus : Utilisation de Sass avec Bootstrap: Dans cette leçon, nous allons étendre ce que nous venons d'apprendre à travailler avec un framework CSS très populaire tel que Bootstrap. Avant cela, vous avez peut-être travaillé avec Bootstrap dans le passé, mais vous avez peut-être utilisé cette version CSS. Maintenant que nous connaissons Sass, nous pouvons utiliser la version Sass de Bootstrap et nous pouvons en tirer beaucoup plus. Si vous n'êtes pas familier avec Bootstrap, vous pouvez venir ici sur le site Web à getbootstrap.com. Vous pouvez le considérer comme un ensemble de styles prédéfinis que vous pouvez simplement charger rapidement dans votre document. Il a également JavaScript, mais ce n'est pas le focus de la classe d'aujourd'hui. Vous pouvez voir ici quelques exemples de sites Web Bootstrap. Il aura probablement l'air beaucoup similaire à certains des sites que vous avez déjà vus sur le web. Si nous regardons cet exemple, vous pouvez voir beaucoup d'éléments Bootstrap. Fondamentalement, tout ce qui est nécessaire pour obtenir ce look est d'utiliser les bonnes classes. Si je vais dans la documentation, puis dans les composants, vous pouvez littéralement copier et coller une partie du code ici. Tant que vous avez inclus la feuille de style pour Bootstrap, vous obtiendrez exactement le même look que celui-ci. Ce que j'ai fait pour cette leçon, c'est que j'ai repensé le petit projet sur lequel nous travaillions dans les leçons précédentes pour utiliser des éléments Bootstrap. Comme toujours, tout ce que vous avez à faire pour accéder à ce projet, c'est d'aller sur github.com/christopherdodd/skillshare. Comme vous pouvez le voir ici, j'ai inclus cet exemple de projet Bootstrap pour nous à utiliser dans cette leçon. Je vais l'enregistrer dans mon dossier de code. Je vais venir ici et je peux juste cliquer pour l'agrandir. Je vais juste redimensionner quelques fenêtres ici pour le rendre plus facile pour vous de voir. Maintenant, nous avons notre exemple de projet Bootstrap là-bas. Ce que je vais faire est d'ouvrir à nouveau le code VS. Ouvrons ce dossier. Exemple, projet Bootstrap. Débarrassez-vous de cet écran de bienvenue et jetez un oeil à notre projet. Tout d'abord, passons en direct avec ceci afin que nous puissions le voir dans notre navigateur. Comme vous pouvez le voir ici, c'est un design similaire à notre projet avant, mais ce que j'ai fait, c'est que je l'ai juste modifié pour utiliser Bootstrap. Nous avons les éléments Bootstrap là-dedans, mais c'est à peu près la même disposition qu'avant. Nous pourrons clôturer cette opération une fois que nous aurons réussi à mettre en place notre projet. Jetons un coup d'oeil au code. Dans notre fichier d'index, comme je l'ai dit, du code similaire, mais nous utilisons toutes les classes Bootstrap ici. Il y a certains personnalisés que j'ai inclus dans ma propre feuille de style ici. Ce sont des modifications au-dessus de Bootstrap. Nous avons Bootstrap ici et nous avons la version compilée de ce fichier SCSS et dans un index.html. Vous pouvez voir que nous incluons d'abord Bootstrap, puis nous incluons nos styles. J' aime toujours qu'on puisse courir « Watch Sass ». On pourrait faire plus de changements ici.. Ensuite, une fois que nous avons enregistré, il sera recompilé dans cette feuille de style juste ici. Ici, nous avons Bootstrap qui fonctionne. Nous pouvons réellement remplacer Bootstrap en réécrivant les définitions de classe ici. Comme vous pouvez le voir ici, j'ai changé de ligne pour n'avoir aucune marge parce que cela me donnait des problèmes. Si je passe juste au fichier SCSS et que je commente cela, vous verrez que si j'ouvre mes outils de développement et descend à une taille d'écran plus petite, les marges négatives sur les lignes me donnaient un moment difficile. En fait, il est entré et a surpassé ces styles. Comme vous pouvez le voir ici, il est beaucoup plus agréable sans ces marges négatives. Ne vous méprenez pas. C'est une façon parfaitement correcte de le faire avec juste CSS. Nous n'avons même pas besoin de SCSS dans ce cas parce que je n'écris rien d'autre que le simple vieux CSS ici. Comme vous pouvez le voir, c'est à peu près le même fichier. En fait, je pense que c'est exactement le même code. Nous n'avons pas vraiment besoin de SCSS dans ce cas. Mais ce que nous pouvons faire au numéro 1, voir comment un framework Sass à grande échelle est structuré et en même temps tirer parti de certaines des fonctionnalités de Sass, nous pouvons effectivement inclure le code Sass de Bootstrap. Faisons ça maintenant. Je vais retourner sur le site de Bootstrap. Allons à « Accueil », puis cliquez sur « Télécharger ». Ici, vous pouvez voir que j'utilisais juste le CSS compilé. Mais ce que je peux faire à la place est de télécharger le code source. Je vais cliquer sur « Télécharger la source ». Je vais mettre ça sur mon bureau. Je vais m'étendre à ça. Maintenant, je peux aller sur mon bureau et ouvrir « Bootstrap 4.4.1 ». Le nombre sera probablement différent selon le moment où vous regardez ce cours. Mais à l'heure actuelle, c'est la dernière version de Bootstrap. Vous pouvez voir ici il y a beaucoup de code différent. Dans ce dossier dist, par exemple, nous avons le CSS compilé et aussi le JavaScript compilé. Mais ce que nous recherchons, c'est le SCSS juste ici dans ce dossier SCSS. Comme vous pouvez le voir ici, nous avons une gamme de partiels différents. Ensuite, nous avons ces trois qui nous donnent le « Bootstrap-grid », le « Bootstrap-reboot » et le « Co-op Bootstrap ». Nous avons également des dossiers pour les mix-ins, les utilitaires et les fournisseurs. Ce que je veux faire, c'est ouvrir notre exemple de projet Bootstrap ici. Créons une structure de dossier pour contenir ce code Bootstrap. Je vais créer un dossier fournisseur. Dans ce dossier fournisseur, je vais créer un dossier appelé Bootstrap. Puis à l'intérieur de Bootstrap, je vais appeler ce SCSS. Enfin, maintenant, il est temps d'introduire tous les fichiers de ce dossier SCSS dans nos propres projets. Voilà, tu y vas. Si je retourne à mon éditeur de code maintenant, vous pouvez voir que nous avons le dossier fournisseur et à l'intérieur nous avons fournisseur, Bootstrap, SCSS. Nous avons tous les fichiers SCSS ici. Maintenant, il s'agit d'une structure importante à examiner et à étudier si vous voulez en savoir plus sur la structuration d'applications à grande échelle. Nous avons tous les différents mix-ins dans différents partiels ici. C' est très [inaudible] et nous incluons tout cela dans ce fichier Bootstrap SCSS final, qui est fondamentalement juste un tas d'entrées. Je vous encourage à regarder autour de vous et à remarquer ce qui se passe ici. Mais une fois que vous avez fait cela, nous pouvons réellement aller modifier ce fichier Bootstrap pour éliminer certaines choses dont nous n'avons pas besoin et aussi éditer certaines choses que nous voulons changer. L' avantage de le faire de cette façon est que nous pouvons réduire la quantité de lignes qui finissent dans notre fichier bootstrap.css final. Nous pouvons également changer les variables avant qu'elles ne soient utilisées dans le CSS. C' est en fait un assez bon système et quelque chose dont vous pouvez certainement profiter si vous savez comment le faire et que vous cherchez des gains d'efficacité supplémentaires. Avant d'apporter des modifications à ce fichier, cependant, nous allons devoir reconfigurer le fonctionnement de notre compilateur Sass en direct. Rappelez-vous avant que nous ayons juste un dossier et donc le fichier de sortie irait juste à côté de notre fichier SCSS dans ce dossier de sortie. Eh bien, c'est un peu différent maintenant parce que nous avons un dossier juste pour SCSS. Nous avons également notre SCSS Bootstrap spécifique stocké dans ce dossier. Nous allons en fait avoir besoin de faire un peu de configuration pour nous assurer que tous nos CSS, importe où se trouvent les fichiers SCSS dans notre projet, qui finissent dans ce répertoire ici. Pour ce faire, nous devons aller dans les paramètres utilisateur de notre application VS Code. Je vais entrer dans le code des paramètres de préférences. Ensuite, je vais chercher un compilateur Sass en direct. On y va. Maintenant, nous voulons descendre ici et nous voulons éditer nos formats. Aussi, nous voulons changer si elle génère le fichier de carte. Nous pouvons éditer, comme il est dit ici dans settings.json. Je vais cliquer dessus. Comme vous pouvez le voir ici, j'ai déjà mon code configuré. Ce premier petit bloc ici est pour définir nos formats, et je lui ai donné le SavePath de. /css. Cela va prendre nos fichiers CSS et assurez-vous qu'ils vont dans ce dossier ici. Ce que j'ai également fait est une liste exclue. Je vais exclure la grille Bootstrap et le redémarrage Bootstrap. Si je supprime simplement cela, supprime effectivement ce qui génère le fichier de carte également. Sauvons ça. Si je frappe « Regarder Sass », vous verrez que nous obtenons Bootstrap-grid, bootstrap-grid.css.map, bootstrap-reboot, bootstrap-reboot.css.map, bootstrap.css.map, style.css.map. Nous n'avons vraiment pas besoin de beaucoup de fichiers CSS, donc cela va toujours fonctionner avec juste ceci ici. Mais ce que j'aime faire est d'exclure ces fichiers et de ne pas générer la carte. Ce que nous pouvons faire ici, c'est que nous pouvons supprimer tous nos CSS ici parce que nous utilisons SCSS complètement dans ce projet. Je vais déplacer tout ça à la poubelle. Je vais sauver ça. Ensuite, déclenchons simplement notre compilateur Sass à nouveau. Je pense qu'il faudra peut-être redémarrer. Éteignez ça et cliquez sur « Regarder Sass ». Maintenant, vous pouvez voir qu'il génère juste le fichier bootstrap.css, tout comme nous l'avions avant. Donc, si on retourne à notre page web, tout fonctionne normalement. La première chose que nous pouvons faire pour réduire la quantité de lignes dans un fichier bootstrap.css. Si nous faisons défiler jusqu'à la fin, nous pouvons voir que c'est plus de 10 000 lignes de CSS bootstrap. La plupart du temps, nous n'avons pas vraiment besoin de tout ce que bootstrap a à offrir. L' un des avantages de l'utilisation de la version SCSS de bootstrap est que nous pouvons commencer à supprimer certaines de ces importations. Ce que nous pouvons faire est un processus d'élimination pour supprimer des choses et voir si cela casse notre page Web. Mais ce que je voudrais faire à la place, c'est l'inverse de cela. Un processus inverse d'élimination où nous réintroduisons certaines de ces importations. Ce que je vais faire est de commenter tous ces éléments pour qu'aucun d'entre eux exécute et si je rafraîchis la page ici, vous pouvez voir que nous avons perdu tous nos styles. Commençons à réintroduire certaines de ces parties de bootstrap jusqu'à ce que nous ayons le look que nous recherchons. Nous allons certainement avoir besoin de fonctions, de variables et de mixins. Ceux-ci sont obligatoires dans bootstrap et ils ne vont probablement pas faire de différence sur notre page web. Mais ils fournissent juste les fonctions, les variables et les mixins qui sont utilisés dans le reste de ces partiels ici. Nous allons vouloir inclure la route. Nous allons vouloir inclure des formulaires de grille. Nous utilisons certainement des boutons que nous avons utilisés, qu'avons-nous utilisé d'autre ? Nav et navbar. Faisons juste navbar pour l'instant, nous avons utilisé des cartes. Si vous voulez vérifier ce que nous avons utilisé à tout moment, vous pouvez simplement aller dans index.html et vous pouvez voir certains des éléments qui utilisaient, tels que les cartes de barre de navigation ici. Tout est là dans le html. Je vais retourner ici. On n'utilise pas la pagination. Nous utilisons le jumbotron. Qu' est-ce qu'on utilise d'autre ? Les services publics vont probablement être quelque chose dont nous avons besoin. Comme vous pouvez le voir, nous avons encore beaucoup de commentaires. Je vais sauver ça. Retournez à ici et vous pouvez voir que nous sommes déjà un peu plus proches. Nous avons beaucoup de ces éléments, mais il nous manque encore des choses importantes. Je vais inclure le redémarrage et le type, qui a des styles de typographie dedans et actualisons la page. Maintenant, vous pouvez voir avec reboot et taper que nous avons réellement à peu près tous les styles dont nous avons besoin. Je ne pense pas qu'il manque quelque chose ici. Il fonctionne sur mobile. Allons y jeter un oeil à notre fichier bootstrap.css final ici. Vous pouvez voir ici c'est un peu plus de sept mille lignes de code. Nous l'avons réduit de 3 000 lignes de code, ce qui est plutôt bon. Cela signifie que la taille du fichier sera plus petite. Il est juste plus efficace en général de n'utiliser que ce dont vous avez besoin. Avec un framework comme Bootstrap qui est si complet et qui a tellement de choses dedans, il y a une chance que nous puissions vraiment augmenter la taille de notre projet sans avoir besoin de le faire. C' est l'un des avantages que nous offre l'utilisation de la version SCSS de Bootstrap. L' autre avantage, bien sûr, est le thème Bootstrap. Ce que je veux dire par là, c'est si nous allons dans disons, les variables dans notre fichier de variables de soulignement, et je dois faire défiler jusqu'au bas. On y va. Vous pouvez voir que toutes nos couleurs sont définies avec un modificateur par défaut de point d'exclamation à la fin. Ce que cela fait, c'est qu'il ne crée une variable avec cette couleur bleue que si une variable du nom de bleu n'existe pas déjà. Ce que cela signifie, c'est que nous pouvons facilement les modifier, les remplacer en définissant nous-mêmes les variables. Ce ne sont que les valeurs par défaut, mais nous pouvons réellement entrer et changer la couleur bleue tout au long du bootstrap en entrant juste ici et en changeant la couleur bleue. Regardons en fait la section du site bootstrap qui parle de thème bootstrap. Si je cherche le thème ici, nous pouvons voir le thème bootstrap. Comme il est dit ici, Bootstrap 4 personnalisé avec nos nouvelles variables Sass intégrées pour les préférences de style globales, pour faciliter le thème et les changements de composants. Comme vous pouvez le voir ici, il vous montre ce que vous devez importer au minimum. Celles-ci sont requises. Rappelez-vous ici, les fonctions, les variables et les mixins. Créons réellement un espace entre eux afin que vous puissiez voir que ceux-ci sont nécessaires. Allez également les étiqueter comme ceci requis, puis redémarrer, tapez, images, code, grille. Tous ces éléments sont facultatifs. Nous avons besoin de root, de redémarrer et de taper, mais nous n'avons pas encore besoin d'images. Parce que nous n'avons pas d'images dans notre projet particulier. Mais ceux-ci sont également facultatifs et comme il est dit ici avec cette configuration en place, vous pouvez commencer à modifier toutes les variables Sass et les mappages de colonnes dans un fichier .scss personnalisé. Mais je pense que c'est assez facile et assez sûr juste pour créer nos personnalisations ici. Nous pourrions toujours créer notre propre .scss personnalisé, puis importer ce fichier dans ce fichier. Mais avec un si petit fichier déjà, je ne pense pas que cela va nous nuire de modifier ce fichier bootstrap. Allons et commençons à programmer ce fichier d'amorçage et à changer quelque chose qui existe dans nos fichiers d'amorçage. Il y a beaucoup d'options différentes ici et différents exemples que vous pouvez trouver sur cette page pour commencer le thème barre oblique. Tant d'options différentes. Mais quelque chose qui est vraiment simple à faire est de changer une couleur. Jetons un coup d'oeil aux couleurs que nous utilisons ici. Nous utilisons ce bouton primaire juste ici. Plongons dans le index.html ici, comme vous pouvez le voir ici, nous utilisons la classe primaire du bouton. Cela va probablement être dans le composant pour les boutons. Défilant vers le bas et vers le haut, nous pouvons trouver des boutons ici et nous avons nos styles de base de boutons. Nous pouvons faire défiler vers le bas jusqu'à ce que nous trouvons le bouton principal ou vous pouvez le rechercher. Rien pour le bouton primaire. Qu' en est-il si nous recherchons le primaire ? Rien là non plus. Je pense que la raison en est parce que nous utilisons des cartes et des boucles. Donc, ce que nous recherchons, c'est la couleur primaire. Il est assez sûr de supposer que c'est ce qui est utilisé dans le bouton primaire. Laissez-moi revenir aux variables et nous allons chercher primaire. Comme vous pouvez le voir ici, la couleur pour primaire sera cette couleur bleue et si nous regardons la définition de ce bleu, il est défini sur une valeur par défaut de cette couleur ici. qui correspond bien sûr à cette couleur ici. Ce que nous pouvons faire, c'est d'entrer et de changer cette couleur primaire. Peut-être qu'on le change en jaune à la place. Si je garde cela, revenez ici, vous verrez maintenant que la couleur primaire dans l'ensemble de notre projet est maintenant changée en jaune. Mais bien sûr, nous ne voulons pas le changer ici. En fait, nous voulons juste le remplacer dans notre fichier d'amorçage final. On peut le faire de n'importe où ici. Appelez cette variable, et je vais remplacer la couleur du primaire en l'appelant jaune et même résultat. Vous voulez garder le fichier de variables propre, garder toutes ces valeurs par défaut dedans et toutes nos modifications que nous voulons mettre dans le seul fichier. Encore une fois, nous pouvons le mettre ici dans notre fichier bootstrap.scss. Ou nous pouvons créer un fichier .scss personnalisé, puis importer ce fichier dans celui-ci. C' est un exemple. Je ne suis pas sûr des autres choses que vous pourriez vouloir faire. Les possibilités sont vraiment infinies, c'est à vous de décider ce que vous voulez changer. Nous pourrions changer n'importe laquelle de ces variables et elle se propageait partout où cette variable est utilisée dans notre projet tout au long du bootstrap, et cela s'appliquerait à notre propre feuille de style. Fonctionnalité très puissante dans bootstrap. Vous pouvez toujours faire l'implémentation CSS et vous pouvez remplacer des choses comme celle-ci. Mais si vous voulez obtenir la source de la façon dont le bootstrap est généré, vous pouvez venir ici, réduire le nombre de choses que vous importez, et modifier réellement les variables à partir de ce fichier. Très cool. Cela conclut cette leçon sur le bootstrap et l'utilisation de la forme scss de bootstrap. J' espère que vous vous sentez un peu plus confiant avec scss maintenant. Évidemment, à mesure que vous codez plus et que vous vous y habituez, vous allez commencer à vous sentir plus à l'aise avec. Finalement, je suis sûr que vous ne voudrez pas revenir au codage de l'ancienne façon avec CSS. Parfois, si vous avez juste besoin de faire un petit changement, CSS est bien. Mais comme vous le verrez, lorsque vous entrez dans des projets de plus en plus grands, vous devrez utiliser quelque chose comme SASS. Sinon, ça va devenir trop désordonné. J' espère que vous avez apprécié cette leçon et la prochaine vidéo que nous allons terminer et parler de votre projet de classe. Je te verrai dans la prochaine. 8. Conclusion et projet de cours: Dans cette classe, nous avons couvert un bon aperçu des capacités des ASS et comment l'utilisation de ce langage peut transformer totalement la façon dont vous écrivez CSS. Bien qu'il y ait un tas d'autres fonctionnalités dans SaS, ce que nous avons couvert dans cette classe est suffisant pour vous permettre exploiter la puissance de ce langage génial. Je dois admettre qu'il m'a fallu beaucoup de temps pour commencer à adopter des ASS dans mon propre flux de travail. Mais avec des outils comme le compilateur SaS live, il ne faut pas trop de temps pour configurer votre projet pour profiter de tous les avantages de SaS. Ce que je veux que vous fassiez pour votre projet de classe est de migrer du code existant de CSS vers SCSS, tout comme nous l'avons fait dans cette classe. Idéalement, ce serait un projet web sur lequel vous travaillez déjà, mais si vous n'avez pas votre propre projet, hésitez pas à utiliser les projets sur lesquels nous avons travaillé dans cette classe. Tout le code, comme toujours, sera dans mon dépôt Skillshare sur github.com/Christopherdodd/SkillShare. Enfin, si vous avez besoin de conseils ou de conseils sur ce que nous avons couvert dans la classe d'aujourd'hui, assurez-vous de laisser un commentaire dans la boîte de discussion ci-dessous, et je ferai de mon mieux pour vous orienter dans la bonne direction. Merci, comme toujours, d'avoir regardé et j'espère vous revoir dans certains de mes autres cours.