Il est temps de passer à l'exercice suivant, appelé Exercice : Moins.
Quelque chose que vous souhaitez que votre médecin
vous dira lorsque vous lui rendrez visite la prochaine fois.
Néanmoins, examinons moins en détail maintenant pour comprendre comment nous pouvons définir des
classes CSS en utilisant la syntaxe moins de préprocesseur et ensuite
générer automatiquement les classes CSS correspondantes à partir de nos classes moins.
Pour commencer, allons à
notre projet dans l'éditeur de texte, puis dans le dossier CSS,
je vais renommer ce fichier styles.css en styles-old.css.
Je vais enregistrer ma version actuelle du
fichier styles.css car maintenant ils vont écrire moins de code
et de code SCSS, puis générer automatiquement le
fichier styles.css en compilant ces langages de préprocesseur CSS.
Après avoir fait cela, puis dans mon dossier CSS,
nous allons créer un nouveau fichier nommé styles.less.
Et à l'intérieur, je vais définir mon moins de code.
Définissons d'abord quelques variables moins.
Je dirai, lt-gray : ddd et ainsi de suite.
Vous pouvez voir que j'ai ajouté quelques variables de moins ici.
Donc, j'ai défini l'arrière-plan sombre pour être la première valeur, la
lumière de fond et l'arrière-plan pâle et aussi
une variable appelée carousel-item-height comme 300 pixels.
Je vais utiliser ces variables lorsque je définis mes classes CSS plus tard.
Permettez-moi maintenant d'ajouter un Mixin pour
mon fichier moins appelé zero margin et je vais définir pad-up-dn
et pad-left-right,
0px étant la valeur par défaut et puis ici,
je mets la marge : 0px auto,
padding : pat-up-dn
et pad-left-right.
Donc, avec cela, j'ai défini le Mixin que je vais
utiliser dans mes classes CSS que nous définirons plus tard.
Et cela porte deux paramètres pad-up-dn et pad-gauche-droite.
Ensuite, j'ajouterai quelques classes CSS supplémentaires donc je commencerai avec l'
en-tête de ligne et définirai cela comme marge zéro.
Permettez-moi d'ajouter quelques classes CSS de plus, puis revenez pour les regarder.
Ici, j'ai défini une autre classe CSS
en utilisant le Mixin à marge zéro avec les paramètres 50 pixel et 0 pixel,
un pied de page où je définit la couleur de fond en utilisant
la variable qui a défini précédemment comme
fond pâle, puis jumbotron avec
le Mixin à marge zéro et le couleur d'arrière-plan définie comme background-light,
et certains de ces autres qui sont des classes CSS standard, que
j'ai inclus là parce que je vais les utiliser dans
ma page web et ensuite vous avez
navbar-dark pour laquelle la couleur d'arrière-plan que je nous ai définis background-dark.
Et le contenu de l'onglet pour lequel vous me voyez à nouveau
en utilisant le gris clair variable pour la couleur de bordure ici.
Ensuite, j'ajoute dans la classe carrousel ici pour laquelle je définit
l'arrière-plan comme background-dark ici et puis,
je définit cet élément carrousel.
Remarque, comment je définit cela comme un élément imbriqué à l'intérieur de mon carrousel et pour le carrousel,
je définit la hauteur comme carousel-item-height ici,
qui est une variable que j'ai définie plus tôt et à l'intérieur,
je définit l'image,
qui est encore une fois un autre élément imbriqué à l'intérieur de l'élément carrousel et alors pour l'image,
je vais définir quelques propriétés CSS ensuite.
Comme vous pouvez le voir,
j'ai défini certaines propriétés pour l'image.
Ici, vous voyez l'utilisation de classes imbriquées ici,
donc vous avez un carrousel et à l'intérieur que j'ai un élément de carrousel et à l'intérieur,
une image définie ici.
Enfin en bas,
j'ajoute dans la classe CarouselButton,
qui est utilisée pour spécifier le CarouselButton.
Avec ces changements à mon fichier styles.less en ajoutant dans toutes les classes moins ici,
laissez-moi enregistrer les modifications.
Maintenant, je veux être en mesure de convertir automatiquement cela dans leur fichier CSS correspondant.
Pour convertir automatiquement mon fichier moins dans son fichier CSS correspondant,
je vais utiliser un module de nœud appelé comme moins.
Pour installer cela à l'invite,
je tape sudo npm install moins g moins.
J' installe ceci en tant que module de nœud global.
Et une fois que cela est installé,
il rendra disponible un compilateur moins appelé en tant que lessc à l'invite de commande.
Si vous exécutez ceci sur une machine Windows,
vous n'avez pas besoin de faire sudo,
comme vous vous en souvenez probablement déjà.
Maintenant que nous avons installé le compilateur lessc,
je vais compiler mon code moins dans son code CSS correspondant.
Pour ce faire, laissez-moi aller dans le dossier CSS et ici,
vous verrez que vous avez le fichier styles.less.
À l'invite, tapez lessc styles.less styles.css,
et une fois la compilation terminée,
vous aurez le fichier CSS correspondant.
Donc, comme vous le voyez maintenant,
vous avez le moins de code converti en code CSS correspondant. En
regardant le code CSS généré à partir du code moins,
vous verrez que ce code ressemble à peu près le
même que ce que nous avons défini dans notre fichier CSS original.
Avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons appris à écrire
moins de code, puis à le convertir automatiquement en code CSS correspondant.
À ce stade, vous pouvez enregistrer les modifications apportées
à votre dépôt Git avec le message Exercice : Moins.