Site Onepage et SCSS CSS20

Cet exercice consiste à construire une interface web de type onepage, puis à convertir les styles CSS créés afin de les présenter en exploitant les avantages de SCSS.

Consignes de l’exercice

Préparation de l’environnement de travail

Créez un dossier racine local pour stocker la totalité des fichiers de l’exercice.

Téléchargez le fichier html à utiliser pour l’exercice et enregistrez-le dans le dossier racine.

Fichiers de travail

Créez un dossier css dans le dossier racine.

Créez un nouveau fichier styles.css dans le dossier css.

Liez le fichier styles.css à la page web page.html.

Mise en forme en CSS

Choisissez deux couleurs de base ou utilisez les mêmes que le modèle : #00c1db et #008da0.

Reproduisez la mise en forme illustrée ci-dessous via CSS.

Voir le code par Julien Crego (@crego) sur CodePen.

Mise en place de SASS

La suite de l’exercice peut être effectuée sur la base de votre production à la question précédente ou en récupérant le fichier style.css ci-dessous :

Fichiers de travail

Créez un dossier scss dans le dossier racine de votre projet.

Créez un nouveau fichier styles.scss dans le dossier scss.

Copiez / collez le contenu du fichier style.css dans votre fichier style.scss.

Paramétrez votre projet afin de compiler automatiquement le fichier styles.scss sous le nom styles.css dans le dossier css.

Conversion en SCSS

Reprenez tout le code CSS pour imbriquer les éléments qui peuvent l’être.

Créez des variables pour chacune des couleurs de la page. Le nombre de couleur doit être limité aux deux couleurs de base associées au noir et au blanc. Pour les autres couleurs (formulaire ou pied de page), utilisez les fonctions darken() et lighten().

Isolez toutes les variables de couleur dans un fichier partiel enregistré dans un sous-dossier scss/partials.

Créez un mixin pour gérer le dégradé à partir de deux couleurs passées en paramètres.

Isolez votre mixin dans un nouveau fichier partiel.

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.