Dans cette formation, vous allez apprendre à utiliser le préprocesseur SASS avec la syntaxe SCSS.
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,.
Des tas de fonctionnalités sont disponibles avec SASS afin de rendre votre code plus compréhensible, flexible et scalable.
Voici quelques unes des plus importantes :
- 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 va se découper en deux grandes parties. Dans la première, 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.
Rendez-vous de l'autre côté pour commencer à coder !
Curriculum du cours
-
VoirMise en place (12:08)
-
VoirPackage.json et sourcemap (8:35)
-
VoirL'extension "Live SASS Compiler" (5:34)
-
VoirLes variables (14:09)
-
VoirLe nesting (13:09)
-
VoirLes mixins partie 1 (8:01)
-
VoirLes mixins partie 2 (8:10)
-
VoirLes mixins partie 3 (11:18)
-
VoirExtend et placeholder (9:46)
-
VoirLes modules (13:09)
-
VoirForward et index (7:28)
-
VoirLes instructions (11:12)
-
VoirLes types : number (7:30)
-
VoirLes types : string color list (9:44)
-
VoirLes types : map (7:21)
-
VoirFonctions et utilitaires (7:05)
-
VoirMise en place du projet final (9:16)
-
VoirHTML de la navbar (12:34)
-
VoirCSS de la navbar au format desktop (17:01)
-
VoirCSS de la navbar au format mobile (11:22)
-
VoirScript permettant l'affichage de la navbar au format mobile (5:20)
-
VoirHTML du header (6:05)
-
VoirCSS effet fondu (6:02)
-
VoirCSS du header au format desktop (14:59)
-
VoirCSS du header au format mobile (10:42)
-
VoirHTML de la section "à propos" (3:51)
-
VoirCSS de la section "à propos" (13:17)
-
VoirHTML de la section "plats" (10:46)
-
VoirCSS de la section "plats" au format desktop (8:48)
-
VoirCSS de la section "plats" au format mobile (8:48)
-
VoirHTML & CSS de la section "valeurs" (8:23)
-
VoirHTML de la section de réservation (9:06)
-
VoirCSS de la section de réversation (11:53)
-
VoirHTML de la section de contact (7:29)
-
VoirCSS de la section de contact (11:12)
-
VoirRefactoring (7:11)
-
VoirHTML du footer (4:28)
-
VoirCSS du footer (11:34)
-
VoirMise en place de la page "Menu" (7:57)
-
VoirHTML de la page Menu (4:36)
-
VoirCSS de la page Menu (12:01)