Ce projet m’a introduit au SCSS qui complète le CSS avec l’utilisation des @mixin/@include et variables. J’ai également étudié les grids et les media queries.

Les deux objectifs de ce projet ont été de faire découvrir le langage SASS et de servir d’introduction au responsive design. Une maquette Figma d’une page d’atterrissage a été fournie en deux formats : écran d’ordinateur et écran de téléphone. Elle était à reproduire, là aussi, au plus proche du pixel-perfect.

SASS est un langage dont les fichiers de type .scss se compilent en langage CSS. Ce que SASS apporte en plus que le CSS, ce sont ses fonctionnalités qui permettent de réduire la longueur de la feuille de style et d’éviter un code trop répétitif. Il y a trois fonctionnalités principales que j’ai appris à maîtriser pour bien utiliser SASS : les variables, les mixins et les imbrications.

Les variables permettent de ne déclarer qu’une seule fois la valeur d’une propriété, ce qui est également pratique lorsqu’il faut la changer, cela évite de devoir lire tout le fichier pour effectuer les changements.

Voici par exemple comment j’ai établi la palette de couleur de la maquette et l’ai utilisé dans mon fichier .scss :

Lors de la réalisation de la maquette, j’ai pu utiliser la variable $grey à de nombreuses reprises. Dans une situation professionnelle, si le client souhaitait soudainement changer la palette et remplacer le gris par une autre couleur, j’aurais simplement à la changer là où ma variable est déclarée.

Les mixins permettent, dans la même idée que les variables, de définir un ensemble de propriétés qui peut être réutiliser ailleurs dans d’autres sélecteurs avec @include. Les mixins peuvent également prendre des arguments.

Ce projet a été réalisé en local et n’a pas été déployé. Pour le voir, il faut donc le lancer directement via ma machine. Pour ma part, je l’affiche avec l’extension vscode live server pour voir instantanément sur le navigateur les changements que j’effectue dans mon code.