Le préprocesseur CSS
Cours complet SASS
Apprenez cette compétence très utile.
Les préprocesseurs CSS permettent principalement de rendre beaucoup plus maintenable la base de code qu'on produit lors du développement de fichiers CSS.
Structurez et développez un code sain.
Des tas de fonctionnalités sont disponibles avec SASS afin de rendre votre code plus compréhensible, flexible et scalable.
Voici quelques-unes de ces fonctionnalités :
- Les modules, qui permettent de découper son code en composants, variables, mixins et code réutilisable.
- Le nesting, qui permet d'imbriquer des règles CSS les unes dans les autres afin de réutiliser le sélecteur des règles parent.
- La création de toutes sortes d'instructions comme des conditions, des boucles ou encore des fonctions est possible avec SASS.
- L'utilisation de types : number, string, list, map, colors, etc
- Des variables au comportement différent des variables CSS sont également pratiques.
- Etc ...
Ce cours se divise en deux parties.
Dans la première partie, nous étudierons le préprocesseur de A à Z, en découvrant toutes les fonctionnalités de ce dernier.
Dans la seconde partie, nous créerons un splendide projet de A à Z dans les conditions du réel. Vous aurez accès au design du site et nous intégrerons tout ça de manière professionnelle.
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- Mise en place (12:08)
- Package.json et sourcemap (8:35)
- L'extension "Live SASS Compiler" (5:34)
- Les variables (14:09)
- Le nesting (13:09)
- Les mixins partie 1 (8:01)
- Les mixins partie 2 (8:10)
- Les mixins partie 3 (11:18)
- Extend et placeholder (9:46)
- Les modules (13:09)
- Forward et index (7:28)
- Les instructions (11:12)
- Les types : number (7:30)
- Les types : string color list (9:44)
- Les types : map (7:21)
- Fonctions et utilitaires (7:05)
- Mise en place du projet final (9:16)
- HTML de la navbar (12:34)
- CSS de la navbar au format desktop (17:01)
- CSS de la navbar au format mobile (11:22)
- Script permettant l'affichage de la navbar au format mobile (5:20)
- HTML du header (6:05)
- CSS effet fondu (6:02)
- CSS du header au format desktop (14:59)
- CSS du header au format mobile (10:42)
- HTML de la section "à propos" (3:51)
- CSS de la section "à propos" (13:17)
- HTML de la section "plats" (10:46)
- CSS de la section "plats" au format desktop (8:48)
- CSS de la section "plats" au format mobile (8:48)
- HTML & CSS de la section "valeurs" (8:23)
- HTML de la section de réservation (9:06)
- CSS de la section de réversation (11:53)
- HTML de la section de contact (7:29)
- CSS de la section de contact (11:12)
- Refactoring (7:11)
- HTML du footer (4:28)
- CSS du footer (11:34)
- Mise en place de la page "Menu" (7:57)
- HTML de la page Menu (4:36)
- CSS de la page Menu (12:01)
Cliquez sur les questions
Foire aux questions.
Une fois un cours acheté, vous y avez accès à vie.
Sur un ordinateur pour un confort de lecture optimal, mais également sur tablette et téléphone.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Full-Stack est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Full-Stack dans l'ordre.
Rejoignez des milliers d'étudiants