1
00:00:03,290 --> 00:00:09,780
Il est temps de passer à l'exercice suivant, appelé Exercice : Moins.

2
00:00:09,780 --> 00:00:12,860
Quelque chose que vous souhaitez que votre médecin

3
00:00:12,860 --> 00:00:16,380
vous dira lorsque vous lui rendrez visite la prochaine fois.

4
00:00:16,380 --> 00:00:25,515
Néanmoins, examinons moins en détail maintenant pour comprendre comment nous pouvons définir des

5
00:00:25,515 --> 00:00:31,830
classes CSS en utilisant la syntaxe moins de préprocesseur et ensuite

6
00:00:31,830 --> 00:00:38,725
générer automatiquement les classes CSS correspondantes à partir de nos classes moins.

7
00:00:38,725 --> 00:00:42,630
Pour commencer, allons à

8
00:00:42,630 --> 00:00:51,865
notre projet dans l'éditeur de texte, puis dans le dossier CSS,

9
00:00:51,865 --> 00:00:58,750
je vais renommer ce fichier styles.css en styles-old.css.

10
00:00:58,750 --> 00:01:03,870
Je vais enregistrer ma version actuelle du

11
00:01:03,870 --> 00:01:08,685
fichier styles.css car maintenant ils vont écrire moins de code

12
00:01:08,685 --> 00:01:13,200
et de code SCSS, puis générer automatiquement le

13
00:01:13,200 --> 00:01:19,165
fichier styles.css en compilant ces langages de préprocesseur CSS.

14
00:01:19,165 --> 00:01:23,300
Après avoir fait cela, puis dans mon dossier CSS,

15
00:01:23,300 --> 00:01:31,280
nous allons créer un nouveau fichier nommé styles.less.

16
00:01:32,070 --> 00:01:37,290
Et à l'intérieur, je vais définir mon moins de code.

17
00:01:37,290 --> 00:01:41,800
Définissons d'abord quelques variables moins.

18
00:01:41,800 --> 00:01:52,420
Je dirai, lt-gray : ddd et ainsi de suite.

19
00:01:52,420 --> 00:01:57,980
Vous pouvez voir que j'ai ajouté quelques variables de moins ici.

20
00:01:57,980 --> 00:02:02,310
Donc, j'ai défini l'arrière-plan sombre pour être la première valeur, la

21
00:02:02,310 --> 00:02:05,850
lumière de fond et l'arrière-plan pâle et aussi

22
00:02:05,850 --> 00:02:11,235
une variable appelée carousel-item-height comme 300 pixels.

23
00:02:11,235 --> 00:02:17,305
Je vais utiliser ces variables lorsque je définis mes classes CSS plus tard.

24
00:02:17,305 --> 00:02:22,995
Permettez-moi maintenant d'ajouter un Mixin pour

25
00:02:22,995 --> 00:02:31,130
mon fichier moins appelé zero margin et je vais définir pad-up-dn

26
00:02:41,320 --> 00:02:48,760
et pad-left-right,

27
00:02:48,760 --> 00:02:55,725
0px étant la valeur par défaut et puis ici,

28
00:02:55,725 --> 00:03:01,620
je mets la marge : 0px auto,

29
00:03:01,620 --> 00:03:11,520
padding : pat-up-dn

30
00:03:11,520 --> 00:03:14,460
et pad-left-right.

31
00:03:14,460 --> 00:03:20,180
Donc, avec cela, j'ai défini le Mixin que je vais

32
00:03:20,180 --> 00:03:25,785
utiliser dans mes classes CSS que nous définirons plus tard.

33
00:03:25,785 --> 00:03:31,265
Et cela porte deux paramètres pad-up-dn et pad-gauche-droite.

34
00:03:31,265 --> 00:03:39,740
Ensuite, j'ajouterai quelques classes CSS supplémentaires donc je commencerai avec l'

35
00:03:39,740 --> 00:03:50,435
en-tête de ligne et définirai cela comme marge zéro.

36
00:03:50,435 --> 00:03:57,560
Permettez-moi d'ajouter quelques classes CSS de plus, puis revenez pour les regarder.

37
00:03:57,560 --> 00:04:01,170
Ici, j'ai défini une autre classe CSS

38
00:04:01,170 --> 00:04:06,480
en utilisant le Mixin à marge zéro avec les paramètres 50 pixel et 0 pixel,

39
00:04:06,480 --> 00:04:10,790
un pied de page où je définit la couleur de fond en utilisant

40
00:04:10,790 --> 00:04:15,660
la variable qui a défini précédemment comme

41
00:04:15,660 --> 00:04:19,940
fond pâle, puis jumbotron avec

42
00:04:19,940 --> 00:04:25,885
le Mixin à marge zéro et le couleur d'arrière-plan définie comme background-light,

43
00:04:25,885 --> 00:04:30,200
et certains de ces autres qui sont des classes CSS standard, que

44
00:04:30,200 --> 00:04:34,610
j'ai inclus là parce que je vais les utiliser dans

45
00:04:34,610 --> 00:04:38,010
ma page web et ensuite vous avez

46
00:04:38,010 --> 00:04:42,850
navbar-dark pour laquelle la couleur d'arrière-plan que je nous ai définis background-dark.

47
00:04:42,850 --> 00:04:46,980
Et le contenu de l'onglet pour lequel vous me voyez à nouveau

48
00:04:46,980 --> 00:04:51,820
en utilisant le gris clair variable pour la couleur de bordure ici.

49
00:04:51,820 --> 00:04:58,700
Ensuite, j'ajoute dans la classe carrousel ici pour laquelle je définit

50
00:04:58,700 --> 00:05:06,010
l'arrière-plan comme background-dark ici et puis,

51
00:05:06,010 --> 00:05:10,540
je définit cet élément carrousel.

52
00:05:10,540 --> 00:05:18,225
Remarque, comment je définit cela comme un élément imbriqué à l'intérieur de mon carrousel et pour le carrousel,

53
00:05:18,225 --> 00:05:24,225
je définit la hauteur comme carousel-item-height ici,

54
00:05:24,225 --> 00:05:28,965
qui est une variable que j'ai définie plus tôt et à l'intérieur,

55
00:05:28,965 --> 00:05:31,005
je définit l'image,

56
00:05:31,005 --> 00:05:36,635
qui est encore une fois un autre élément imbriqué à l'intérieur de l'élément carrousel et alors pour l'image,

57
00:05:36,635 --> 00:05:40,010
je vais définir quelques propriétés CSS ensuite.

58
00:05:40,010 --> 00:05:42,650
Comme vous pouvez le voir,

59
00:05:42,650 --> 00:05:46,200
j'ai défini certaines propriétés pour l'image.

60
00:05:46,200 --> 00:05:50,950
Ici, vous voyez l'utilisation de classes imbriquées ici,

61
00:05:50,950 --> 00:05:55,305
donc vous avez un carrousel et à l'intérieur que j'ai un élément de carrousel et à l'intérieur,

62
00:05:55,305 --> 00:05:57,145
une image définie ici.

63
00:05:57,145 --> 00:05:58,945
Enfin en bas,

64
00:05:58,945 --> 00:06:02,075
j'ajoute dans la classe CarouselButton,

65
00:06:02,075 --> 00:06:07,605
qui est utilisée pour spécifier le CarouselButton.

66
00:06:07,605 --> 00:06:14,935
Avec ces changements à mon fichier styles.less en ajoutant dans toutes les classes moins ici,

67
00:06:14,935 --> 00:06:16,465
laissez-moi enregistrer les modifications.

68
00:06:16,465 --> 00:06:23,230
Maintenant, je veux être en mesure de convertir automatiquement cela dans leur fichier CSS correspondant.

69
00:06:23,230 --> 00:06:28,875
Pour convertir automatiquement mon fichier moins dans son fichier CSS correspondant,

70
00:06:28,875 --> 00:06:32,660
je vais utiliser un module de nœud appelé comme moins.

71
00:06:32,660 --> 00:06:35,015
Pour installer cela à l'invite,

72
00:06:35,015 --> 00:06:41,085
je tape sudo npm install moins g moins.

73
00:06:41,085 --> 00:06:47,150
J' installe ceci en tant que module de nœud global.

74
00:06:47,150 --> 00:06:54,555
Et une fois que cela est installé,

75
00:06:54,555 --> 00:07:01,985
il rendra disponible un compilateur moins appelé en tant que lessc à l'invite de commande.

76
00:07:01,985 --> 00:07:04,570
Si vous exécutez ceci sur une machine Windows,

77
00:07:04,570 --> 00:07:06,130
vous n'avez pas besoin de faire sudo,

78
00:07:06,130 --> 00:07:09,900
comme vous vous en souvenez probablement déjà.

79
00:07:09,900 --> 00:07:14,565
Maintenant que nous avons installé le compilateur lessc,

80
00:07:14,565 --> 00:07:21,010
je vais compiler mon code moins dans son code CSS correspondant.

81
00:07:21,010 --> 00:07:26,290
Pour ce faire, laissez-moi aller dans le dossier CSS et ici,

82
00:07:26,290 --> 00:07:29,650
vous verrez que vous avez le fichier styles.less.

83
00:07:29,650 --> 00:07:38,909
À l'invite, tapez lessc styles.less styles.css,

84
00:07:38,909 --> 00:07:43,010
et une fois la compilation terminée,

85
00:07:43,010 --> 00:07:45,580
vous aurez le fichier CSS correspondant.

86
00:07:45,580 --> 00:07:47,580
Donc, comme vous le voyez maintenant,

87
00:07:47,580 --> 00:07:53,565
vous avez le moins de code converti en code CSS correspondant. En

88
00:07:53,565 --> 00:07:59,310
regardant le code CSS généré à partir du code moins,

89
00:07:59,310 --> 00:08:02,910
vous verrez que ce code ressemble à peu près le

90
00:08:02,910 --> 00:08:08,075
même que ce que nous avons défini dans notre fichier CSS original.

91
00:08:08,075 --> 00:08:11,270
Avec cela, nous terminons cet exercice.

92
00:08:11,270 --> 00:08:15,515
Dans cet exercice, nous avons appris à écrire

93
00:08:15,515 --> 00:08:21,525
moins de code, puis à le convertir automatiquement en code CSS correspondant.

94
00:08:21,525 --> 00:08:26,155
À ce stade, vous pouvez enregistrer les modifications apportées

95
00:08:26,155 --> 00:08:32,410
à votre dépôt Git avec le message Exercice : Moins.