1 00:00:03,250 --> 00:00:06,680 Nous allons maintenant passer à l'exercice suivant, 2 00:00:06,680 --> 00:00:11,535 où nous allons utiliser la syntaxe SCSS pour définir 3 00:00:11,535 --> 00:00:18,325 nos classes SCSS et les convertir automatiquement en classes CSS correspondantes. 4 00:00:18,325 --> 00:00:22,220 Nous ferons exactement le même ensemble d'étapes 5 00:00:22,220 --> 00:00:26,890 que nous avons fait pour le dernier exercice que nous venons de terminer, 6 00:00:26,890 --> 00:00:31,470 mais en utilisant la syntaxe SCSS. 7 00:00:31,470 --> 00:00:38,885 Pour commencer, dans votre projet dans le dossier CSS, 8 00:00:38,885 --> 00:00:47,180 créons un nouveau fichier et nommez-le comme style démarrer SCSS. 9 00:00:47,180 --> 00:00:51,660 Maintenant, dans ce fichier, nous allons définir nos classes SCSS et ensuite 10 00:00:51,660 --> 00:00:56,795 convertir automatiquement cela en nos classes CSS. 11 00:00:56,795 --> 00:01:01,350 Donc là, commençons par définir d'abord les variables, 12 00:01:01,350 --> 00:01:05,110 donc je vais commencer par gris clair, 13 00:01:06,810 --> 00:01:11,820 j'ai maintenant ajouté quelques variables supplémentaires ici avec les 14 00:01:11,820 --> 00:01:16,940 mêmes noms que nous avons utilisés dans le dernier exercice précédemment, 15 00:01:16,940 --> 00:01:20,760 mais avec la syntaxe SCSS donc 16 00:01:20,760 --> 00:01:25,630 toutes les variables sont précédées de la signe dollar pour les définir en tant que variables. 17 00:01:25,630 --> 00:01:27,750 Suivant définira le mixin. 18 00:01:27,750 --> 00:01:43,888 Donc, pour le mixin, je dirais mixin zéro marge, pad-up-down, 19 00:01:43,888 --> 00:01:48,920 pad-gauche-droite, 20 00:01:48,920 --> 00:01:54,920 et nous définissons les valeurs comme avant. 21 00:02:17,930 --> 00:02:21,130 Maintenant que nous avons terminé de définir le mixin, 22 00:02:21,130 --> 00:02:26,690 nous pouvons l'utiliser dans nos classes SCSS que nous définissons plus tard. 23 00:02:27,480 --> 00:02:31,280 Définissons maintenant quelques classes SCSS, 24 00:02:31,280 --> 00:02:40,025 donc je vais définir l'en-tête de ligne que je vais utiliser 25 00:02:40,025 --> 00:02:44,740 le mixin de marge zéro 26 00:02:44,740 --> 00:02:52,900 avec les valeurs zéro pixel ici. 27 00:02:53,620 --> 00:02:59,055 Nous allons continuer à définir quelques classes supplémentaires qu'ils ajouteront ici, 28 00:02:59,055 --> 00:03:01,910 donc vous pouvez voir que j'ai défini avec l' 29 00:03:01,910 --> 00:03:05,290 en-tête de ligne et le contenu de la ligne où j'ai utilisé les 30 00:03:05,290 --> 00:03:12,730 mixins et le pied de page et l'adresse Jumbotron et ainsi de suite, 31 00:03:12,730 --> 00:03:15,230 et vous pouvez voir l'utilisation des 32 00:03:15,230 --> 00:03:21,190 variables que nous avons défini précédemment dans cet exemple. 33 00:03:21,190 --> 00:03:27,875 Le code est évidemment disponible dans les instructions d'exercice qui suivent cette vidéo. 34 00:03:27,875 --> 00:03:32,295 Ensuite, nous allons ajouter si vous imbriquez des classes. 35 00:03:32,295 --> 00:03:35,395 Tout comme nous l'avons fait dans le dernier exercice, 36 00:03:35,395 --> 00:03:40,780 nous allons ajouter dans la classe de carrousel avec l'arrière-plan défini à l'arrière-plan sombre, puis à 37 00:03:40,780 --> 00:03:42,345 l'intérieur où nous allons imbriquer 38 00:03:42,345 --> 00:03:47,065 une classe d'élément de carrousel avec la hauteur définie sur la hauteur de l'élément de carrousel, 39 00:03:47,065 --> 00:03:51,945 puis une autre image de couleurs de classe intérieure avec quelques propriétés là-bas, 40 00:03:51,945 --> 00:03:56,945 puis la classe de bouton carrousel comme nous l'avons défini plus tôt. 41 00:03:56,945 --> 00:04:02,070 Donc, avec cela, nous avons apporté les modifications à nos classes SCSS, 42 00:04:02,070 --> 00:04:03,925 alors sauvegardons les changements. 43 00:04:03,925 --> 00:04:09,200 Maintenant, nous devons le convertir dans son fichier CSS correspondant. 44 00:04:09,200 --> 00:04:13,835 Pour convertir notre code source SCSS dans le code CSS correspondant, 45 00:04:13,835 --> 00:04:19,395 nous allons prendre l'aide d'un autre module de nœud appelé node-sass. 46 00:04:19,395 --> 00:04:24,485 Permet d'installer le module de nœud en tapant npm 47 00:04:24,485 --> 00:04:33,845 install save dev—save dev, puis node-sass. 48 00:04:33,845 --> 00:04:37,690 Ainsi, nous allons enregistrer ce paquet node-sass en 49 00:04:37,690 --> 00:04:42,020 tant que dépendance de développement dans notre fichier package.json. 50 00:04:42,020 --> 00:04:44,160 Une fois l'installation terminée, 51 00:04:44,160 --> 00:04:49,090 nous allons ajouter un script dans notre fichier package.json. 52 00:04:49,090 --> 00:04:52,020 Aller à notre fichier package.json, 53 00:04:52,020 --> 00:04:56,430 si vous faites défiler vers le haut, vous verrez que dans les dépendances dev, 54 00:04:56,430 --> 00:05:00,380 maintenant le node-sass est également ajouté dans les dépendances dev. 55 00:05:00,380 --> 00:05:04,520 Nous allons maintenant ajouter un script dans notre fichier package.jsm, 56 00:05:04,520 --> 00:05:07,015 donc la moitié droite de cette diapositive, 57 00:05:07,015 --> 00:05:11,225 je vais ajouter un script nommé SCSS et 58 00:05:11,225 --> 00:05:20,185 ce script sera node-sass -o CSS/, ce 59 00:05:20,185 --> 00:05:26,500 qui signifie que la sortie de ce fichier converti sera dans le dossier CSS, 60 00:05:26,500 --> 00:05:29,715 et la source ici sera également dans le dossier CSS. 61 00:05:29,715 --> 00:05:34,950 Donc, tous les fichiers avec l'extension .scss seront 62 00:05:34,950 --> 00:05:41,960 convertis et les fichiers corresponding.CSS seront générés par ce node-sass.module. 63 00:05:42,270 --> 00:05:47,450 Sauvegardons les modifications, puis nous allons à l'invite de commande, puis tapez 64 00:05:47,450 --> 00:05:54,310 npm run SCSS et cela prendra soin de faire notre conversion. En 65 00:05:54,310 --> 00:05:56,500 allant à l'invite de commande, 66 00:05:56,500 --> 00:06:02,005 nous taperons npm run SCSS et cela devrait 67 00:06:02,005 --> 00:06:09,795 convertir automatiquement tous nos fichiers SCSS dans les fichiers CSS correspondants. 68 00:06:09,795 --> 00:06:11,905 Aller à notre éditeur, 69 00:06:11,905 --> 00:06:16,525 vous voyez maintenant qu'il y a un fichier styles.css qui a été généré. 70 00:06:16,525 --> 00:06:18,530 En regardant le contenu de ce fichier, 71 00:06:18,530 --> 00:06:25,000 vous verrez que ce code CSS qui a été généré à partir de notre code SCSS est à peu près 72 00:06:25,000 --> 00:06:32,050 le même que le code CSS original que nous avons écrit nous-mêmes. 73 00:06:32,050 --> 00:06:35,875 Avec cela, nous terminons cet exercice. 74 00:06:35,875 --> 00:06:40,220 Dans cet exercice, nous avons vu comment nous pouvons écrire du 75 00:06:40,220 --> 00:06:48,195 code SCSS et ensuite le convertir automatiquement en code CSS correspondant. 76 00:06:48,195 --> 00:06:53,115 La raison pour laquelle nous examinons cela en détail est que 77 00:06:53,115 --> 00:06:59,190 Bootstrap fournit ses fichiers source au format SCSS. 78 00:06:59,190 --> 00:07:02,370 Si vous visitez la page Bootstrap, 79 00:07:02,370 --> 00:07:11,795 vous remarquerez que Bootstrap est conçu à l'aide du préprocesseur Sass. 80 00:07:11,795 --> 00:07:19,745 Donc, si vous regardez comment cela est converti à partir de Sass 81 00:07:19,745 --> 00:07:23,475 et comment vous pouvez faire votre propre personnalisation 82 00:07:23,475 --> 00:07:28,115 en utilisant le code Bootstrap Sass, vous pouvez aller dans la documentation, 83 00:07:28,115 --> 00:07:32,025 puis vous verrez sous 84 00:07:32,025 --> 00:07:37,610 « Options » vous aurez quelques options de personnalisation en cours de définition ici. 85 00:07:39,630 --> 00:07:43,800 Diverses options de personnalisation, vous pouvez voir que 86 00:07:43,800 --> 00:07:49,780 ces variables sont toutes définies en utilisant la syntaxe Sass ici, 87 00:07:49,780 --> 00:07:53,460 et aussi sous « Outils de construction », 88 00:07:53,460 --> 00:08:00,455 il vous expliquera comment vous pouvez faire votre propre personnalisation de Bootstrap. 89 00:08:00,455 --> 00:08:05,330 Maintenant, je vous recommande fortement de ne pas essayer cela tant que vous n'avez pas 90 00:08:05,330 --> 00:08:10,515 suffisamment d'expérience en utilisant Bootstrap dans votre vie quotidienne. 91 00:08:10,515 --> 00:08:12,784 Cela complète notre exercice. 92 00:08:12,784 --> 00:08:21,250 Cela peut être un bon moment pour vous de faire un bon commit avec l'exercice de message SCSS.