[MUSIC]
Cette leçon particulière porte sur les préprocesseurs CSS,
en particulier Less et Sass.
Maintenant, évidemment, ces sujets ont plus à voir avec CSS et la
définition des classes CSS, mais il serait inapproprié
pour moi de compléter un cours
Bootstrap sans explorer un peu les préprocesseurs CSS.
Tout simplement parce que Bootstrap est construit en utilisant Sass pour sa source.
Donc, nous allons examiner brièvement les préprocesseurs CSS,
ce qu'ils sont, comment ils sont utiles dans la définition des classes CSS,
et pourquoi Bootstrap les utilise.
Comme vous le comprenez probablement d'après votre expérience précédente avec CSS,
CSS est idéal pour définir des styles et
appliquer à plusieurs reprises ces styles à divers éléments HTML.
Et c'est ainsi que nous utilisons CSS lorsque nous définissons nos pages Web.
Mais quand vous regardez le code CSS lui-même,
vous commencez à réaliser rapidement les limites de CSS.
Surtout si vous venez d'un arrière-plan de programmation, vous réalisez que
CSS n'a pas ce que vous attendez généralement dans un langage de programmation, comme les variables, l'
imbrication de sélecteurs, de variables, d'expressions et de fonctions.
Cela signifie que l'écriture du code CSS devient fastidieuse, et le
maintien du code CSS devient fastidieux en raison de l'
absence de la syntaxe de type langage de programmation traditionnelle.
Maintenant, c'est là que les préprocesseurs CSS viennent à notre secours.
Il existe plusieurs préprocesseurs CSS populaires qui tentent de remédier à certaines des
lacunes de CSS en prenant en charge un grand nombre de ces fonctionnalités.
Deux en particulier qui nous intéressent sont Less et Sass.
Nous examinerons ces deux éléments plus en détail dans cette leçon.
Maintenant, lorsque vous définissez vos classes CSS en utilisant l'un
de ces langages de préprocesseur comme Less ou
Sass, ils doivent finalement être convertis en CSS,
mais cela peut être fait automatiquement avant que le CSS ne soit utilisé dans votre page Web.
Ce que ces langages de prétraitement nous apportent est une
syntaxe plus semblable à un langage de programmation, comme nous le verrons dans les prochaines diapositives.
Nous allons examiner Less et Sass brièvement.
En particulier, la raison pour laquelle nous examinons cela est que Bootstrap
utilise lui-même Sass pour définir sa source pour ses classes CSS.
Et donc si vous allez dans la personnalisation Bootstrap,
alors vous devrez travailler avec le code Sass.
Bootstrap 3, qui était la version précédente de Bootstrap, utilisait Less,
et donc, j'ai pensé que ce serait une chose appropriée de couvrir à la fois Less et
Sass, car ils sont à peu près similaires les uns aux autres
en termes de leurs capacités et de la façon dont la syntaxe est définie.
Les fonctionnalités typiques que les préprocesseurs CSS apportent sont la prise en charge des
variables, des sélecteurs d'imbrication, des expressions, des fonctions et des mixins.
Nous allons donc examiner certains d'entre eux avec quelques exemples dans les prochaines diapositives.
La première chose que nous allons examiner est les variables.
Maintenant, dans de nombreuses classes CSS que vous définissez,
vous pouvez avoir une utilisation répétée de certaines quantités.
Il pourrait être plus intéressant si vous définissez des variables qui
contiennent ces quantités et utilisez ces variables dans la définition de vos classes CSS.
C' est là que les variables viennent à votre secours.
Ici, nous allons regarder à la fois le code Less et Sss.
Sss est une version de Sass,
version plus populaire de la syntaxe de Sass, c'est pourquoi je me concentre sur Sss ici.
Donc, si vous définissez des variables dans Moins,
vous procéderez au nom de la variable avec un signe @.
Dans le cas de Scss, vous utiliserez un signe dollar avant le nom de la variable.
Et une fois que vous définissez ces variables,
vous pouvez ensuite utiliser ces variables lorsque vous définissez les classes.
Comme vous le voyez dans l'exemple, où nous définissons la barre de navigation inverse comme arrière-plan,
ou la hauteur de l'élément de carrousel comme variables.
Maintenant, l'avantage de définir des variables au début de votre classe CSS
est qu'il y a un seul point où vous pouvez mettre à jour une valeur, et
il mettra automatiquement à jour toutes les classes CSS qui utilisent cette variable.
Typiquement la façon dont nous utilisons les variables dans les langages de programmation.
Les variables dans les langages de préprocesseur CSS peuvent également avoir leur propre portée.
Très souvent, lorsque vous définissez des classes CSS, surtout quand vous
devez définir des classes qui sont imbriquées dans d'autres classes
, alors, votre code CSS devient très lourd.
C' est donc là que l'imbrication est prise en charge par vos préprocesseurs CSS.
Ainsi, comme vous pouvez le voir, vous pouvez définir par exemple une classe de carrousel, et
à l'intérieur d'une classe de carrousel, vous pouvez définir une classe d'élément de carrousel.
De même, la sous-classe d'image à l'intérieur de la classe d'élément de carrousel.
Donc, ici, vous pouvez voir que chacun d'entre eux est imbriqué dans une classe précédente.
Avec les variables, vous pouvez conserver une valeur à la fois dans une variable.
Supposons que vous ayez un groupe de variables qui se résume ensemble
déclarent un ensemble de déclarations CSS, c'est là que nous utilisons des mixins.
Dans Less, vous définissez un mixin en lui donnant un nom,
et dans Sass vous faites simplement précéder cela avec un @mixin
devant le nom de la déclaration mixin.
Et à l'intérieur d'un mixin, vous pouvez définir un tas de déclarations CSS
qui peuvent ensuite être réutilisées pour diverses classes CSS.
Comme vous le voyez dans cet exemple ici, nous définissons la marge zéro
comme un mixin, à la fois dans Less et Sass.
Notez la variation mineure de la syntaxe dans chacun de ces cas.
Et puis, vous pouvez ensuite utiliser ce mixin pour définir des classes CSS supplémentaires.
Donc, ici, vous pouvez voir que pour l'en-tête de ligne, nous définissons la marge zéro comme
un mixin dans l'en-tête de ligne, ce qui signifie que toutes
ces propriétés de la marge zéro seront héritées par cette classe d'en-tête de ligne.
Les mixins eux-mêmes peuvent prendre des paramètres supplémentaires si vous le souhaitez.
Donc, dans ce cas, je suis en train de définir
une variation du mixin de marge zéro que nous avons vu dans la diapositive précédente.
Ici, ce mixin à marge zéro prend deux paramètres,
pad up down et pad left right.
Et avec Less, vous pouvez même spécifier la valeur par défaut pour cela,
mais avec Scss, vous devez spécifier explicitement les valeurs.
Donc, ici, nous définissons deux propriétés CSS différentes, la marge
et le remplissage, puis le remplissage lui-même utilise les paramètres de notre mixin là-bas.
Donc, dans ce cas, vous pouvez utiliser ces mixins comme vous le voyez dans
les deux classes CSS définies sous l'en-tête de ligne et
le contenu de la ligne en spécifiant leurs valeurs de paramètre
lorsque vous incluez ce mixin dans votre cluster CSS.
Non seulement cela, vous pouvez même effectuer des opérations mathématiques sur des
variables prédéfinies lorsque vous les utilisez dans vos classes CSS.
Donc, ici, vous pouvez voir que j'ai défini deux articles de carrousel différents
avec deux tailles différentes, et donc
vous pouvez voir que les hauteurs de chacun d'entre eux sont définies différemment.
Dans un cas, j'utilise la hauteur prédéfinie, dans un autre cas,
je multiplie cette hauteur, puis l'utilise pour définir la
propriété height à l'intérieur de mon élément de carrousel pour la classe item-large.
Donc, ce type d'opérations mathématiques sur
les variables est également autorisé dans les langages de préprocesseur CSS. Les
autres fonctionnalités que les préprocesseurs CSS incluent
sont des fonctions qui vous permettent de définir des fonctions mathématiques, Moins de chaînes.
Vous pouvez également effectuer des opérations de couleur et de fusion de couleurs en utilisant ces fonctions
et en faire usage lorsque vous définissez vos classes CSS.
C' est un peu avancé donc je ne vais pas entrer dans trop de détails là-bas.
En outre, vous pouvez entrer des classes de préprocesseur CSS prédéfinies dans d'autres classes.
Par exemple, si vous avez une classe Less telle que définie, et
que vous pouvez entrer ce fichier dans un autre fichier Less.
De même, si vous avez défini des fichiers Scss,
vous pouvez les importer dans d'autres fichiers Scss à l'aide de l'opération d'importation.
La syntaxe est la même pour Less et Sass.
Maintenant que nous avons vu certaines fonctionnalités des langages de préprocesseur CSS,
examinons maintenant comment nous pouvons réellement les utiliser en faisant quelques exercices.
Tout d'abord, nous ferons un exercice basé sur Moins.
Ensuite, nous suivrons avec un exercice basé sur Sass.
[ MUSIQUE]