• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 10/20/20

Utilisez les préprocesseurs CSS pour des fonctionnalités avancées

Log in or subscribe for free to enjoy all this course has to offer!

Ne serait-ce pas merveilleux si vous pouviez écrire votre CSS comme vous écrivez votre HTML ? Plutôt qu’une longue liste de sélecteurs CSS, vous pourriez indenter vos éléments et modificateurs au sein de leur bloc parent, comme ceci :

.nav {
padding-right: 6rem;
flex: 2 1 auto;
text-align: right;
.nav__link {
display: inline;
font-size: 3rem;
padding-left: 1.5rem;
.nav__link--active {
color: #001534;
}
}
}

Créez une hiérarchie dans votre code

Avoir une hiérarchie visuelle ne rend pas seulement les choses beaucoup plus faciles à lire, cela permet aussi d’être plus concis. En forçant un objet à exister au sein de blocs parents, votre codebase devient beaucoup plus facile à lire et à maintenir. Plutôt que de parcourir votre document de haut en bas en cherchant des éléments dans un bout de code, vous n’avez plus qu’à localiser le bloc que vous cherchez en particulier, et tous les éléments qui lui sont reliés se trouveront au même endroit.

Voici votre nouveau meilleur ami : le préprocesseur CSS

Grâce aux préprocesseurs, vous pouvez rédiger votre code d’une manière plus cohérente visuellement, en utilisant des fonctionnalités comme le nesting

Regardez donc une écriture utilisant le nesting dans un préprocesseur, à gauche, avec le résultat en CSS compilé à droite :

.nav {
padding-right: 6rem;
flex: 2 1 auto;
text-align: right;
.nav__link {
display: inline;
font-size: 3rem;
padding-left: 1.5rem;
.nav__link--active {
color: #001534;;
}
}
}
.nav {
padding-right: 6rem;
flex: 2 1 auto;
text-align: right;
}
.nav .nav__link {
display: inline;
font-size: 3rem;
padding-left: 1.5rem;
}
.nav .nav__link .nav__link--active {
color: #001534;
}

Ne vous préoccupez pas trop de la syntaxe pour le moment, on y viendra. 😇 Observez la façon dont le code imbriqué (ou nesté) produit un fichier CSS très standardisé. Coder en utilisant une syntaxe plus cohérente c’est bien, le souci c’est que les navigateurs voudront toujours que vos feuilles de style leur soient fournies sous forme d’un bon vieux fichier CSS. Les préprocesseurs vous permettent d’avoir les deux à la fois, en transformant la syntaxe vers du code CSS standard qui sera compris par les navigateurs.

Découvrez les fonctionnalités des préprocesseurs

Les préprocesseurs regorgent d’outils qui vont nous aider à mieux structurer notre code. Dans cette partie du chapitre, nous allons rapidement les découvrir afin que vous soyez familier avec ces outils sans trop creuser. Nous les verrons plus en détail plus tard dans le cours. En attendant, vous pouvez vous familiariser avec leur nom et leur fonction.

Les variables

En plus d’avoir une syntaxe beaucoup plus agréable visuellement, grâce aux préprocesseurs vous avez accès à des fonctionnalités que vous pouvez trouver dans d’autres langages de programmation courants, tels que les variables :

$mint: #15DEA5;
.header {
background-color: $mint
}
.header {
background-color: #15DEA5;
}

Les variables vous permettent de stocker des valeurs répétées fréquemment, comme par exemple les couleurs et les mensurations, dans un élément unique que vous pouvez réutiliser à travers l’ensemble de votre code. Imaginez que vous avez utilisé une nuance de vert des centaines de fois dans un site, mais que vous décidez de le changer en rouge. Grâce aux variables, il vous suffit de faire le changement une seule fois et il sera répercuté partout où la variable a été utilisée. Un seul changement est plus propre et facile que des centaines ! Pratique, non ?

Les boucles

Les boucles, qui automatisent les tâches répétitives telles que la création d’une série de modificateurs de couleurs, par exemple, vous épargnent un vrai calvaire tout en gardant une codebase plus petite et plus simple à gérer :

$colours: (
mint: #15DEA5,
navy: #001534,
seafoam: #D6FFF5,
white: #fff,
rust: #DB464B
);
@each $colour, $hex in $colours {
.btn--#{$colour} {
background-color: $hex;
}
}
.btn--mint {
background-color: #15DEA5;
}
.btn--navy {
background-color: #001534;
}
.btn--seafoam {
background-color: #D6FFF5;
}
.btn--white {
background-color: #fff;
}
.btn--rust {
background-color: #DB464B;
}

Les structures conditionnelles (ou conditions)

Les opérations logiques vous permettent d’écrire un même bloc de code que vous pouvez utiliser dans différentes circonstances et qui le font réagir en conséquence, comme changer la couleur du texte en fonction de la couleur du fond. Par exemple si le fond est bleu foncé, alors passer le texte en blanc. Avec le temps, cela vous donne une codebase plus petite, plus concise qui est donc beaucoup plus facile à maintenir.

@if (lightness(#15DEA5) > 25%) {
.header {
color: #fff;
background-color: $mint;
}
}@else{
.header {
color: #000;
background-color: $mint;
}
}
.header {
color: #fff;
background-color: #15DEA5;
}

Pas de panique ! C’était juste une introduction. Ne vous préoccupez pas de comment écrire des conditions ou des boucles pour le moment, nous verrons cela en détail plus tard dans le cours. Au lieu de cela, regardez comment nous employons les préprocesseurs pour automatiser la création des sélecteurs.

Découvrez les différents préprocesseurs CSS

Image montrant 3 préprocesseurs
Les différents préprocesseurs

Il existe de nombreux préprocesseurs CSS, mais les trois plus reconnus sont Sass, Less et Stylus. Et entre nous, il n’y a pas grand chose qui les différencie. 🤫 Il existe, il est vrai, quelques différences de syntaxe et de fonctionnalité, mais globalement, ils font tous la même chose et de manière très similaire.

Dans ce cours, nous allons utiliser Sass, mais ce qui compte, c’est d’apprendre et d'intégrer les concepts et process liés à l’utilisation d’un préprocesseur CSS, qui peuvent également s’appliquer à Less et Stylus.

Du coup, pourquoi Sass ? Comme je l’ai dit plus haut, ce sont des outils très similaires. Toutefois, vous avez beaucoup plus de chances de tomber sur Sass dans votre vie professionnelle, et il est donc logique de faire son apprentissage sur l’outil que vous êtes le plus susceptible d’utiliser dans votre travail quotidien, n’est-ce pas ?

En résumé

  • Les préprocesseurs CSS vous permettent d’imbriquer votre code (on appelle ça le nesting) pour créer une hiérarchie plus facile à lire et regrouper des morceaux de code entre eux.

  • Il existe plein de préprocesseurs, mais le plus courant est Sass, qui signifie Syntactically Awesome Style Sheets (“Feuilles de style syntaxiquement fantastiques”).

  • Au-delà du nesting, les préprocesseurs vous permettent d’utiliser des fonctionnalités de programmation pour créer une codebase plus maintenable, tout en diminuant les énormes quantités de code à écrire.

Dans le prochain chapitre, nous aborderons Sass en apprenant sa syntaxe et les outils que vous utiliserez pour l’écrire.

Example of certificate of achievement
Example of certificate of achievement