1
00:00:00,000 --> 00:00:04,466
[MUSIC]

2
00:00:04,466 --> 00:00:08,813
Cette leçon particulière porte sur les préprocesseurs CSS,

3
00:00:08,813 --> 00:00:11,880
en particulier Less et Sass.

4
00:00:11,880 --> 00:00:17,420
Maintenant, évidemment, ces sujets ont plus à voir avec CSS et la

5
00:00:17,420 --> 00:00:22,680
définition des classes CSS, mais il serait inapproprié

6
00:00:22,680 --> 00:00:26,940
pour moi de compléter un cours

7
00:00:26,940 --> 00:00:31,010
Bootstrap sans explorer un peu les préprocesseurs CSS.

8
00:00:31,010 --> 00:00:37,265
Tout simplement parce que Bootstrap est construit en utilisant Sass pour sa source.

9
00:00:37,265 --> 00:00:41,970
Donc, nous allons examiner brièvement les préprocesseurs CSS,

10
00:00:41,970 --> 00:00:47,682
ce qu'ils sont, comment ils sont utiles dans la définition des classes CSS,

11
00:00:47,682 --> 00:00:51,166
et pourquoi Bootstrap les utilise.

12
00:00:52,972 --> 00:00:58,263
Comme vous le comprenez probablement d'après votre expérience précédente avec CSS,

13
00:00:58,263 --> 00:01:00,997
CSS est idéal pour définir des styles et

14
00:01:00,997 --> 00:01:06,325
appliquer à plusieurs reprises ces styles à divers éléments HTML.

15
00:01:06,325 --> 00:01:11,940
Et c'est ainsi que nous utilisons CSS lorsque nous définissons nos pages Web.

16
00:01:11,940 --> 00:01:15,080
Mais quand vous regardez le code CSS lui-même,

17
00:01:15,080 --> 00:01:19,620
vous commencez à réaliser rapidement les limites de CSS.

18
00:01:19,620 --> 00:01:23,660
Surtout si vous venez d'un arrière-plan de programmation, vous réalisez que

19
00:01:23,660 --> 00:01:29,342
CSS n'a pas ce que vous attendez généralement dans un langage de programmation, comme les variables, l'

20
00:01:29,342 --> 00:01:34,610
imbrication de sélecteurs, de variables, d'expressions et de fonctions.

21
00:01:36,310 --> 00:01:40,580
Cela signifie que l'écriture du code CSS devient fastidieuse, et le

22
00:01:40,580 --> 00:01:44,370
maintien du code CSS devient fastidieux en raison de l'

23
00:01:44,370 --> 00:01:49,550
absence de la syntaxe de type langage de programmation traditionnelle.

24
00:01:49,550 --> 00:01:54,770
Maintenant, c'est là que les préprocesseurs CSS viennent à notre secours.

25
00:01:55,800 --> 00:02:01,090
Il existe plusieurs préprocesseurs CSS populaires qui tentent de remédier à certaines des

26
00:02:01,090 --> 00:02:07,290
lacunes de CSS en prenant en charge un grand nombre de ces fonctionnalités.

27
00:02:07,290 --> 00:02:13,000
Deux en particulier qui nous intéressent sont Less et Sass.

28
00:02:14,840 --> 00:02:19,940
Nous examinerons ces deux éléments plus en détail dans cette leçon.

29
00:02:19,940 --> 00:02:24,744
Maintenant, lorsque vous définissez vos classes CSS en utilisant l'un

30
00:02:24,744 --> 00:02:29,760
de ces langages de préprocesseur comme Less ou

31
00:02:29,760 --> 00:02:34,990
Sass, ils doivent finalement être convertis en CSS,

32
00:02:34,990 --> 00:02:39,696
mais cela peut être fait automatiquement avant que le CSS ne soit utilisé dans votre page Web.

33
00:02:39,696 --> 00:02:44,840
Ce que ces langages de prétraitement nous apportent est une

34
00:02:44,840 --> 00:02:51,580
syntaxe plus semblable à un langage de programmation, comme nous le verrons dans les prochaines diapositives.

35
00:02:51,580 --> 00:02:53,620
Nous allons examiner Less et Sass brièvement.

36
00:02:54,990 --> 00:03:00,890
En particulier, la raison pour laquelle nous examinons cela est que Bootstrap

37
00:03:00,890 --> 00:03:08,540
utilise lui-même Sass pour définir sa source pour ses classes CSS.

38
00:03:08,540 --> 00:03:12,980
Et donc si vous allez dans la personnalisation Bootstrap,

39
00:03:12,980 --> 00:03:16,230
alors vous devrez travailler avec le code Sass.

40
00:03:16,230 --> 00:03:21,402
Bootstrap 3, qui était la version précédente de Bootstrap, utilisait Less,

41
00:03:21,402 --> 00:03:26,260
et donc, j'ai pensé que ce serait une chose appropriée de couvrir à la fois Less et

42
00:03:26,260 --> 00:03:32,330
Sass, car ils sont à peu près similaires les uns aux autres

43
00:03:32,330 --> 00:03:39,960
en termes de leurs capacités et de la façon dont la syntaxe est définie.

44
00:03:39,960 --> 00:03:45,630
Les fonctionnalités typiques que les préprocesseurs CSS apportent sont la prise en charge des

45
00:03:45,630 --> 00:03:53,340
variables, des sélecteurs d'imbrication, des expressions, des fonctions et des mixins.

46
00:03:53,340 --> 00:03:59,580
Nous allons donc examiner certains d'entre eux avec quelques exemples dans les prochaines diapositives.

47
00:03:59,580 --> 00:04:02,270
La première chose que nous allons examiner est les variables.

48
00:04:02,270 --> 00:04:05,310
Maintenant, dans de nombreuses classes CSS que vous définissez,

49
00:04:05,310 --> 00:04:11,540
vous pouvez avoir une utilisation répétée de certaines quantités.

50
00:04:11,540 --> 00:04:16,600
Il pourrait être plus intéressant si vous définissez des variables qui

51
00:04:16,600 --> 00:04:21,590
contiennent ces quantités et utilisez ces variables dans la définition de vos classes CSS.

52
00:04:21,590 --> 00:04:24,240
C' est là que les variables viennent à votre secours.

53
00:04:24,240 --> 00:04:29,720
Ici, nous allons regarder à la fois le code Less et Sss.

54
00:04:29,720 --> 00:04:34,090
Sss est une version de Sass,

55
00:04:34,090 --> 00:04:40,670
version plus populaire de la syntaxe de Sass, c'est pourquoi je me concentre sur Sss ici.

56
00:04:40,670 --> 00:04:43,420
Donc, si vous définissez des variables dans Moins,

57
00:04:43,420 --> 00:04:47,610
vous procéderez au nom de la variable avec un signe @.

58
00:04:47,610 --> 00:04:55,720
Dans le cas de Scss, vous utiliserez un signe dollar avant le nom de la variable.

59
00:04:55,720 --> 00:04:57,340
Et une fois que vous définissez ces variables,

60
00:04:57,340 --> 00:05:01,750
vous pouvez ensuite utiliser ces variables lorsque vous définissez les classes.

61
00:05:01,750 --> 00:05:06,700
Comme vous le voyez dans l'exemple, où nous définissons la barre de navigation inverse comme arrière-plan,

62
00:05:06,700 --> 00:05:11,410
ou la hauteur de l'élément de carrousel comme variables.

63
00:05:11,410 --> 00:05:16,350
Maintenant, l'avantage de définir des variables au début de votre classe CSS

64
00:05:16,350 --> 00:05:21,400
est qu'il y a un seul point où vous pouvez mettre à jour une valeur, et

65
00:05:21,400 --> 00:05:27,390
il mettra automatiquement à jour toutes les classes CSS qui utilisent cette variable.

66
00:05:27,390 --> 00:05:31,080
Typiquement la façon dont nous utilisons les variables dans les langages de programmation.

67
00:05:32,110 --> 00:05:38,340
Les variables dans les langages de préprocesseur CSS peuvent également avoir leur propre portée.

68
00:05:39,650 --> 00:05:44,510
Très souvent, lorsque vous définissez des classes CSS, surtout quand vous

69
00:05:44,510 --> 00:05:49,760
devez définir des classes qui sont imbriquées dans d'autres classes

70
00:05:49,760 --> 00:05:53,330
, alors, votre code CSS devient très lourd.

71
00:05:53,330 --> 00:05:58,370
C' est donc là que l'imbrication est prise en charge par vos préprocesseurs CSS.

72
00:05:58,370 --> 00:06:02,380
Ainsi, comme vous pouvez le voir, vous pouvez définir par exemple une classe de carrousel, et

73
00:06:02,380 --> 00:06:05,876
à l'intérieur d'une classe de carrousel, vous pouvez définir une classe d'élément de carrousel.

74
00:06:05,876 --> 00:06:11,900
De même, la sous-classe d'image à l'intérieur de la classe d'élément de carrousel.

75
00:06:11,900 --> 00:06:18,161
Donc, ici, vous pouvez voir que chacun d'entre eux est imbriqué dans une classe précédente.

76
00:06:19,440 --> 00:06:25,410
Avec les variables, vous pouvez conserver une valeur à la fois dans une variable.

77
00:06:25,410 --> 00:06:30,730
Supposons que vous ayez un groupe de variables qui se résume ensemble

78
00:06:30,730 --> 00:06:37,275
déclarent un ensemble de déclarations CSS, c'est là que nous utilisons des mixins.

79
00:06:37,275 --> 00:06:42,910
Dans Less, vous définissez un mixin en lui donnant un nom,

80
00:06:42,910 --> 00:06:47,650
et dans Sass vous faites simplement précéder cela avec un @mixin

81
00:06:47,650 --> 00:06:52,530
devant le nom de la déclaration mixin.

82
00:06:52,530 --> 00:06:58,560
Et à l'intérieur d'un mixin, vous pouvez définir un tas de déclarations CSS

83
00:06:58,560 --> 00:07:03,620
qui peuvent ensuite être réutilisées pour diverses classes CSS.

84
00:07:03,620 --> 00:07:08,110
Comme vous le voyez dans cet exemple ici, nous définissons la marge zéro

85
00:07:08,110 --> 00:07:12,480
comme un mixin, à la fois dans Less et Sass.

86
00:07:12,480 --> 00:07:18,120
Notez la variation mineure de la syntaxe dans chacun de ces cas.

87
00:07:18,120 --> 00:07:25,250
Et puis, vous pouvez ensuite utiliser ce mixin pour définir des classes CSS supplémentaires.

88
00:07:25,250 --> 00:07:30,620
Donc, ici, vous pouvez voir que pour l'en-tête de ligne, nous définissons la marge zéro comme

89
00:07:30,620 --> 00:07:35,480
un mixin dans l'en-tête de ligne, ce qui signifie que toutes

90
00:07:35,480 --> 00:07:40,780
ces propriétés de la marge zéro seront héritées par cette classe d'en-tête de ligne.

91
00:07:40,780 --> 00:07:47,320
Les mixins eux-mêmes peuvent prendre des paramètres supplémentaires si vous le souhaitez.

92
00:07:47,320 --> 00:07:49,970
Donc, dans ce cas, je suis en train de définir

93
00:07:49,970 --> 00:07:54,680
une variation du mixin de marge zéro que nous avons vu dans la diapositive précédente.

94
00:07:54,680 --> 00:07:59,935
Ici, ce mixin à marge zéro prend deux paramètres,

95
00:07:59,935 --> 00:08:03,011
pad up down et pad left right.

96
00:08:03,011 --> 00:08:08,840
Et avec Less, vous pouvez même spécifier la valeur par défaut pour cela,

97
00:08:08,840 --> 00:08:15,276
mais avec Scss, vous devez spécifier explicitement les valeurs.

98
00:08:15,276 --> 00:08:20,871
Donc, ici, nous définissons deux propriétés CSS différentes, la marge

99
00:08:20,871 --> 00:08:27,880
et le remplissage, puis le remplissage lui-même utilise les paramètres de notre mixin là-bas.

100
00:08:27,880 --> 00:08:32,300
Donc, dans ce cas, vous pouvez utiliser ces mixins comme vous le voyez dans

101
00:08:32,300 --> 00:08:36,997
les deux classes CSS définies sous l'en-tête de ligne et

102
00:08:36,997 --> 00:08:41,810
le contenu de la ligne en spécifiant leurs valeurs de paramètre

103
00:08:41,810 --> 00:08:46,270
lorsque vous incluez ce mixin dans votre cluster CSS.

104
00:08:47,470 --> 00:08:52,570
Non seulement cela, vous pouvez même effectuer des opérations mathématiques sur des

105
00:08:52,570 --> 00:08:58,120
variables prédéfinies lorsque vous les utilisez dans vos classes CSS.

106
00:08:58,120 --> 00:09:03,470
Donc, ici, vous pouvez voir que j'ai défini deux articles de carrousel différents

107
00:09:03,470 --> 00:09:05,740
avec deux tailles différentes, et donc

108
00:09:05,740 --> 00:09:10,060
vous pouvez voir que les hauteurs de chacun d'entre eux sont définies différemment.

109
00:09:10,060 --> 00:09:15,105
Dans un cas, j'utilise la hauteur prédéfinie, dans un autre cas,

110
00:09:15,105 --> 00:09:20,244
je multiplie cette hauteur, puis l'utilise pour définir la

111
00:09:20,244 --> 00:09:25,230
propriété height à l'intérieur de mon élément de carrousel pour la classe item-large.

112
00:09:25,230 --> 00:09:28,778
Donc, ce type d'opérations mathématiques sur

113
00:09:28,778 --> 00:09:33,710
les variables est également autorisé dans les langages de préprocesseur CSS. Les

114
00:09:35,060 --> 00:09:40,160
autres fonctionnalités que les préprocesseurs CSS incluent

115
00:09:40,160 --> 00:09:47,365
sont des fonctions qui vous permettent de définir des fonctions mathématiques, Moins de chaînes.

116
00:09:47,365 --> 00:09:53,015
Vous pouvez également effectuer des opérations de couleur et de fusion de couleurs en utilisant ces fonctions

117
00:09:53,015 --> 00:09:57,915
et en faire usage lorsque vous définissez vos classes CSS.

118
00:09:57,915 --> 00:10:01,345
C' est un peu avancé donc je ne vais pas entrer dans trop de détails là-bas.

119
00:10:03,470 --> 00:10:11,552
En outre, vous pouvez entrer des classes de préprocesseur CSS prédéfinies dans d'autres classes.

120
00:10:11,552 --> 00:10:16,680
Par exemple, si vous avez une classe Less telle que définie, et

121
00:10:16,680 --> 00:10:20,100
que vous pouvez entrer ce fichier dans un autre fichier Less.

122
00:10:20,100 --> 00:10:23,347
De même, si vous avez défini des fichiers Scss,

123
00:10:23,347 --> 00:10:29,210
vous pouvez les importer dans d'autres fichiers Scss à l'aide de l'opération d'importation.

124
00:10:29,210 --> 00:10:32,670
La syntaxe est la même pour Less et Sass.

125
00:10:33,890 --> 00:10:40,180
Maintenant que nous avons vu certaines fonctionnalités des langages de préprocesseur CSS,

126
00:10:40,180 --> 00:10:45,520
examinons maintenant comment nous pouvons réellement les utiliser en faisant quelques exercices.

127
00:10:45,520 --> 00:10:49,900
Tout d'abord, nous ferons un exercice basé sur Moins.

128
00:10:49,900 --> 00:10:53,677
Ensuite, nous suivrons avec un exercice basé sur Sass.

129
00:10:53,677 --> 00:10:57,099
[ MUSIQUE]