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.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
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 Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants