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.
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
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.
DémonstrationMise 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 :
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
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.
Sauf mention contraire*, l'article Site Onepage et SCSS [CSS20] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.