Introduction

Cette quête a pour but de te faire aller plus loin dans l'écriture de tes feuilles de style, en te faisant découvrir les préprocesseurs CSS.

🤓 À la fin de cette quête, tu seras capable de :

• ✅ Comprendre ce qu'est un préprocesseur
• ✅ Installer SCSS
• ✅ Utiliser les principales fonctionnalités de SCSS

Comprendre ce qu'est un préprocesseur

CSS te permet de styliser tes pages web, ça tu le sais. Mais tu as dû également te rendre compte que tu écrivais souvent beaucoup de code, parfois pour ne styliser qu'un seul élément. Ce code peut rapidement devenir désorganisé, difficile à relire et donc à maintenir. Entre autres, cela vient du fait que CSS ne possède pas de variables ou de fonctions comme dans d'autres langages, et tu es donc souvent obligé de te répéter. Pas très DRY tout ça !

CSS évolue constamment et de nouvelles méthodologies émergent, afin d'écrire un code CSS propre. Mais parmi toutes ces techniques avancées, nous allons nous intéresser plus précisément aux préprocesseurs CSS.

Pour faire simple, un préprocesseur permet d'écrire du CSS dans un langage alternatif (très proche du CSS natif, rassure-toi) qui apporte des fonctionnalités plus avancées comme les variables, des fonctions, la possibilité d'inclure des fichiers dans d'autres, bref tout un tas de choses te permettant d'écrire plus simplement, de mieux organiser ton code, tout en évitant au maximum les répétitions.

Une fois ce code CSS écrit dans ce nouveau langage, il va être compilé pour être retransformé en CSS natif, qui lui seul est compréhensible par ton navigateur web. Ceci est un point très important qu'il faut bien comprendre avec les préprocesseurs : ils apportent de nouvelles façons d'écrire via un langage alternatif, mais au final le code envoyé au navigateur reste du CSS natif. Le préprocesseur n'apporte pas de nouvelles fonctionnalités à CSS, mais permet juste de faciliter son écriture.

Un petit schéma pour résumer le fonctionnement de SCSS.

Parmi les préprocesseurs CSS les plus répandus, tu trouveras less, stylus, mais tu entendras surtout parler de Sass/Scss. Tu vas découvrir celui-ci en particulier, car c'est le plus répandu aujourd'hui (et notamment utilisé par bootstrap 4, les versions précédentes utilisant less). Sache seulement qu'il en existe d'autres et que leur fonctionnement est relativement proche.

Installation de Sass / SCSS

Tout d'abord, pourquoi ces deux noms ? En réalité, le préprocesseur s'appelle Sass. Il utilise un langage syntaxiquement assez éloigné de CSS. Cette syntaxe étant assez difficile à appréhender et décourageant pas mal de nouveaux développeurs, une manière d'écrire alternative est donc apparue, SCSS, laquelle est extrêmement proche du CSS classique, et donc beaucoup plus facile à apprendre pour ceux qui connaissent déjà le CSS. Mais que tu utilises Sass ou SCSS, les deux syntaxes sont compilées de la même manière, et offrent donc les mêmes fonctionnalités. C'est plus une question de goût entre les deux.

À partir de maintenant, nous ne parlerons donc plus que de SCSS qui est plus simple à aborder.

Pour transformer le fichier SCSS en CSS interprétable par le navigateur, il faut installer un petit compilateur. À l'origine codé en ruby, il existe aujourd'hui des compilateurs SCSS dans plusieurs langages. Tu as donc l'embarras du choix en fonction de ton langage, de ton projet...

Néanmoins, aujourd'hui, la solution la plus utilisée est d'installer SCSS via un outil appelé webpack, que tu découvriras plus en détail dans une future quête. Tu apprendras dans cette dernière à installer SCSS sur ta machine.

Cependant, tu vas avoir besoin de compiler du SCSS pour t'entraîner et pour réaliser le challenge. C'est pourquoi tu vas, pour le moment, utiliser une solution en ligne appelée codebeautify. Cet outil est très simple et compile directement en ligne. Il te permet de taper du code SCSS sur le panneau de gauche, et d'obtenir le résultat immédiatement en CSS sur le panneau de droite.

C'est un outil très pratique mais, tu en conviendras, cette solution ne peut pas être utilisée pour des projets de plus grande ampleur. Tu ne l'utiliseras donc que dans le cadre de cette quête, et non pour tes futurs projets, pour lesquels il faudra installer le compilateur sur ta machine.

Découvrir SCSS

Parmi la multitude de fonctionnalités que SCSS offre, tu vas t'intéresser à six points en particulier : l'imbrication, les mixins, les variables, les fonctions propres à SCSS, l'import et l'héritage.

Attention, dans la documentation officielle, pour chaque bloc d'exemple de code, tu peux choisir (en haut à droite) entre la syntaxe Sass (affichée par défaut) ou la syntaxe SCSS. Sélectionne bien cette dernière syntaxe.

L'imbrication

En CSS, il faut écrire beaucoup de code pour styliser un élément. Par exemple, prends un élément ul, une simple liste. Si tu veux le styliser (avec beaucoup de goût) pour que :

• le fond de ta liste soit rouge
• que le texte de chaque item li de la liste soit en vert
• qu'au survol général de la liste, le fond de la liste devienne bleu et les textes des items violets
• mais qu'au survol sur un item en particulier, le texte de cet item devienne jaune,

tu devras écrire :

<ul class="maListe">
    <li>Item1</li>
    <li>Item2</li>
</ul>

.maListe {
    background-color:red;
}

.maListe:hover {
    background-color:blue;
}

.maListe:hover > li {
    color:purple;
}

.maListe > li {
    color:green;
}

.maListe > li:hover {
    color:yellow;
}

C'est long et répétitif. Heureusement, le nesting te permet d'aborder le problème avec une syntaxe alternative qui autorise d'imbriquer le code CSS l'un dans l'autre de cette façon :

.maListe {
    background-color:red;
    &:hover {
        background-color:blue;
        > li {
            color:purple;
        }
    }
    > li {
        color:green;
        &:hover {
            color:yellow;
        }
    }
}

Pas mal non ? Tu remarqueras la petite subtilité pour l'appel du :hover, il faut mettre un & devant. Ce caractère & fait référence à l'élément parent le plus proche dans lequel il est imbriqué.

Les variables

SCSS donne la possibilité d'utiliser des variables. Pour cela, il suffit de les déclarer avec un dollar devant. Mais à quoi peuvent bien servir des variables en CSS ? à plein de choses ! Par exemple, tu es souvent amené à répéter une même couleur à plusieurs endroits dans ton code. Le fait de la mettre dans une variable te permet en une seule modification de celle-ci, de changer la couleur sur tout ton site ! On peut également imaginer des variables pour les tailles de polices par défaut, les espacements, etc.

Un petit exemple :

    $couleur-principale: #fffff;
    $couleur-secondaire: #00000;

    .monSiteTresColore {
        color: $couleur-principale;
        background-color : $couleur-secondaire
    }

Note que les variables existent nativement sous CSS depuis CSS3 . Cependant, leur utilisation est un peu plus complexe et limitée qu'avec SCSS.

Les fonctions propres à SCSS

Il existe de nombreuses fonctions apportées par SCSS, pour la manipulation des couleurs, chaînes de caractères, des valeurs numériques... Les plus utiles sont celles dédiées aux couleurs. En effet, elles te permettent de calculer automatiquement une couleur dérivée d'une autre. Par exemple, les fonctions lighten($color, $amount) ou darken ($color, $amount) permettent de calculer une couleur plus claire ou plus foncée en fonction d'un pourcentage indiqué. De même, il existe saturate() ou desaturate() pour jouer sur la saturation, ou encore complement() ou inverse() pour obtenir la couleur complémentaire ou inversée. Ce ne sont que quelques exemples, alors n'hésite pas à creuser la documentation à ce sujet. Il te sera alors très facile de créer tout un jeu de couleurs sur ton site et, grâce à la puissance des variables, de changer toutes ces couleurs en ne modifiant que ta variable $color !

N'hésite pas à tester pour bien comprendre le fonctionnement.

Les mixins

C'est une des fonctionnalités les plus appréciables de SCSS, car les mixins peuvent faire gagner beaucoup de temps et de code. Ce sont des espèces de fonctions CSS. La syntaxe commence par un @mixin, suivi du nom de la mixin et de paramètres optionnels. Cela peut t'éviter de répéter du code commun, de faciliter l'écriture de code complexe ou redondant. Des frameworks CSS comme bootstrap utilisent de nombreuses mixins dans leur code.

Par exemple en CSS, si tu souhaites faire une ombre sur une box et sur le texte qu'elle contient, mais que l'ombre sur le texte soit deux fois moins grande et d'une couleur plus claire, tu devras faire :

    .myText {
        text-shadow : 6px 6x 4px #ff0000;
        box-shadow : 3px 3px 2px #ff6666;
    }   

pour rappel, text shadow demande ces paramètres : offset-x | offset-y | blur-radius | color

Si tu dois faire la même chose avec une autre couleur, tu devras réécrire ces lignes avec d'autres valeurs que tu devras calculer. C'est là que les mixins prennent tout leur sens. Avec elles, en SCSS, tu n'auras plus qu'à écrire :

    @mixin myShadows ($x, $y, $blur, $color) {
        text-shadow : $x $y $blur $color;
        box-shadow : $x/2 $y/2 $blur/2 lighten($color, 50);    
    } 

    .myText {
        @include myShadows(6px 6x 4px #ff0000);
    }

et la mixin @myShadows est maintenant réutilisable partout où tu le souhaites. Tu peux aussi donner des valeurs par défaut aux paramètres, comme avec des fonctions.

    @mixin myTest ($paramRequired, $colorOptional: black) { 
        //... 
    }

L'héritage

Parfois, plusieurs éléments possèdent de nombreuses propriétés CSS en commun (fond, police, taille de police, couleur, padding...). Mais elles ont aussi des propriétés qui peuvent leur être propres. Afin d'éviter d'avoir à répéter ces propriétés à chaque fois, le système d'héritage peut s'appliquer. Ainsi il est possible de reprendre le contenu d'une autre déclaration :

$mainColor : orange;

.default-presentation {
    color: $mainColor;
    background-color: lighten ($mainColor, 70);
    font-size: 1.2em;
    padding: 10px;
    border-radius:4px;
}

.myDefaultTitle { 
    @extend .default-presentation; 
    // ... autres propriétés propres au titre
}

.myDefaultAlertBox { 
    @extend .default-presentation; 
    // ... autres propriétés propres à la box...
}

L'import

Cette fonctionnalité permet d'importer un fichier scss dans un autre. Cela permet de mieux découper ces fichiers. Imaginons par exemple un fichier base.scss où seraient définies toutes les variables et mixins. Il suffira d'appeler ce fichier dans un autre pour y avoir accès, ce qui évite d'avoir à réécrire ce code à chaque fois.

    // dans le fichier style.scss et/ou admin.scss et/ou autres fichiers
    @import 'base';

    // et maintenant tu peux utiliser ce qu'il y a dans base.scss
    // ...

Pour aller encore plus loin

SCSS apporte de nombreuses autres choses qui te permettent de gagner toujours plus de temps. Tu pourras ainsi utiliser des structures de contrôle, telles des conditions ou des boucles.

SCSS offre également la possibilité d'effectuer des opérations, notamment pour mixer des unités. Mais cette fonctionnalité existe maintenant nativement sous CSS avec la fonction calc(), que tu as déjà abordée dans la quête sur CSS.

💪 Challenge

Un anneau pas si unique

Afin de donner plus de style au site findThePrecious, Sauron veut être en mesure d'ajouter des anneaux sur ses pages. Plein d'anneaux, des grands, des petits, avec plein de couleurs différentes ! Tu devras donc, à l'aide de SCSS, créer une mixin appelée ring qui permet de dessiner un anneau.

Hint : un anneau n'est rien d'autre qu'un carré avec un border-radius important, sans couleur de fond mais avec une bordure assez large.

Cette mixin doit te permettre :

• De choisir une taille et une couleur pour l'anneau
• Une ombre colorée doit apparaître (en fonction de la taille et de la couleur choisie)
• L'épaisseur de l'anneau doit être fonction de la taille choisie

Une fois cette mixin créée, réalise une simple page HTML, appelée precious.html, correspondant à l'image ci-dessous (ne tiens pas compte du header).

Hint : Utilise une boucle for en SCSS pour afficher la succession de 6 anneaux horizontaux imbriqués, de plus en plus grands.

Poste le résultat sur une page github.

Critères de validation

• Le projet contient les fichiers SCSS et les fichiers CSS compilés à partir du SCSS.
• La page precious.html charge ce CSS et le résultat obtenu correspond à la maquette.
• Ce code SCSS suit les bonnes pratiques (nesting, variables...)
• Une mixin permet de dessiner facilement des anneaux.
• Une boucle for est utilisée pour générer les 6 anneaux imbriqués.