Nous allons maintenant passer à l'exercice suivant,
où nous allons utiliser la syntaxe SCSS pour définir
nos classes SCSS et les convertir automatiquement en classes CSS correspondantes.
Nous ferons exactement le même ensemble d'étapes
que nous avons fait pour le dernier exercice que nous venons de terminer,
mais en utilisant la syntaxe SCSS.
Pour commencer, dans votre projet dans le dossier CSS,
créons un nouveau fichier et nommez-le comme style démarrer SCSS.
Maintenant, dans ce fichier, nous allons définir nos classes SCSS et ensuite
convertir automatiquement cela en nos classes CSS.
Donc là, commençons par définir d'abord les variables,
donc je vais commencer par gris clair,
j'ai maintenant ajouté quelques variables supplémentaires ici avec les
mêmes noms que nous avons utilisés dans le dernier exercice précédemment,
mais avec la syntaxe SCSS donc
toutes les variables sont précédées de la signe dollar pour les définir en tant que variables.
Suivant définira le mixin.
Donc, pour le mixin, je dirais mixin zéro marge, pad-up-down,
pad-gauche-droite,
et nous définissons les valeurs comme avant.
Maintenant que nous avons terminé de définir le mixin,
nous pouvons l'utiliser dans nos classes SCSS que nous définissons plus tard.
Définissons maintenant quelques classes SCSS,
donc je vais définir l'en-tête de ligne que je vais utiliser
le mixin de marge zéro
avec les valeurs zéro pixel ici.
Nous allons continuer à définir quelques classes supplémentaires qu'ils ajouteront ici,
donc vous pouvez voir que j'ai défini avec l'
en-tête de ligne et le contenu de la ligne où j'ai utilisé les
mixins et le pied de page et l'adresse Jumbotron et ainsi de suite,
et vous pouvez voir l'utilisation des
variables que nous avons défini précédemment dans cet exemple.
Le code est évidemment disponible dans les instructions d'exercice qui suivent cette vidéo.
Ensuite, nous allons ajouter si vous imbriquez des classes.
Tout comme nous l'avons fait dans le dernier exercice,
nous allons ajouter dans la classe de carrousel avec l'arrière-plan défini à l'arrière-plan sombre, puis à
l'intérieur où nous allons imbriquer
une classe d'élément de carrousel avec la hauteur définie sur la hauteur de l'élément de carrousel,
puis une autre image de couleurs de classe intérieure avec quelques propriétés là-bas,
puis la classe de bouton carrousel comme nous l'avons défini plus tôt.
Donc, avec cela, nous avons apporté les modifications à nos classes SCSS,
alors sauvegardons les changements.
Maintenant, nous devons le convertir dans son fichier CSS correspondant.
Pour convertir notre code source SCSS dans le code CSS correspondant,
nous allons prendre l'aide d'un autre module de nœud appelé node-sass.
Permet d'installer le module de nœud en tapant npm
install save dev—save dev, puis node-sass.
Ainsi, nous allons enregistrer ce paquet node-sass en
tant que dépendance de développement dans notre fichier package.json.
Une fois l'installation terminée,
nous allons ajouter un script dans notre fichier package.json.
Aller à notre fichier package.json,
si vous faites défiler vers le haut, vous verrez que dans les dépendances dev,
maintenant le node-sass est également ajouté dans les dépendances dev.
Nous allons maintenant ajouter un script dans notre fichier package.jsm,
donc la moitié droite de cette diapositive,
je vais ajouter un script nommé SCSS et
ce script sera node-sass -o CSS/, ce
qui signifie que la sortie de ce fichier converti sera dans le dossier CSS,
et la source ici sera également dans le dossier CSS.
Donc, tous les fichiers avec l'extension .scss seront
convertis et les fichiers corresponding.CSS seront générés par ce node-sass.module.
Sauvegardons les modifications, puis nous allons à l'invite de commande, puis tapez
npm run SCSS et cela prendra soin de faire notre conversion. En
allant à l'invite de commande,
nous taperons npm run SCSS et cela devrait
convertir automatiquement tous nos fichiers SCSS dans les fichiers CSS correspondants.
Aller à notre éditeur,
vous voyez maintenant qu'il y a un fichier styles.css qui a été généré.
En regardant le contenu de ce fichier,
vous verrez que ce code CSS qui a été généré à partir de notre code SCSS est à peu près
le même que le code CSS original que nous avons écrit nous-mêmes.
Avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons vu comment nous pouvons écrire du
code SCSS et ensuite le convertir automatiquement en code CSS correspondant.
La raison pour laquelle nous examinons cela en détail est que
Bootstrap fournit ses fichiers source au format SCSS.
Si vous visitez la page Bootstrap,
vous remarquerez que Bootstrap est conçu à l'aide du préprocesseur Sass.
Donc, si vous regardez comment cela est converti à partir de Sass
et comment vous pouvez faire votre propre personnalisation
en utilisant le code Bootstrap Sass, vous pouvez aller dans la documentation,
puis vous verrez sous
« Options » vous aurez quelques options de personnalisation en cours de définition ici.
Diverses options de personnalisation, vous pouvez voir que
ces variables sont toutes définies en utilisant la syntaxe Sass ici,
et aussi sous « Outils de construction »,
il vous expliquera comment vous pouvez faire votre propre personnalisation de Bootstrap.
Maintenant, je vous recommande fortement de ne pas essayer cela tant que vous n'avez pas
suffisamment d'expérience en utilisant Bootstrap dans votre vie quotidienne.
Cela complète notre exercice.
Cela peut être un bon moment pour vous de faire un bon commit avec l'exercice de message SCSS.