DÉVELOPPEZ VOS COMPÉTENCES CSS AVEC SASS ET COMPASS.
Objectifs de la formation Sass et Compass
OBJECTIFS :
Grâce à Sass et à son framework CSS3 Compass, les intégrateurs et développeurs web professionnels confrontés à des impératifs de productivité et de maintenabilité, disposent enfin d'outils libres pour écrire de façon cohérente leurs feuilles de styles CSS. Porté par une communauté très active, le préprocesseur libre Sass offre un arsenal de fonctions pour la productivité du développeur front-end : code CSS allégé et simplifié lors de la phase de développement, variables, mixins, fonctions, placeholders, concaténation, validation de code à la volée...
Cette formation très complète vous permettra de découvrir les richesses offertes par Sass and Compass.
À l'issue de la formation, les participants seront capables de :
- Maîtriser les concepts introduits par Sass
- Organiser efficacement leur code
- Penser leurs projets de manière plus atomique
- Mieux cerner des problématiques actuelles liées à l'intégration.
Cette formation Sass et Compass s'adresse aux Intégrateurs, aux développeurs front-end, ainsi qu'aux développeurs sensibilisés à l'intégration.
Contenu du cours Sass et Compass
PROGRAMME :Introduction à Sass
Historique Grands principes
Installation du préprocesseur Sass
Installation depuis l'invite de commande Un mot sur les interfaces graphiques Première transformation d'un fichier Sass en feuille de styles CSS Utiliser son éditeur préféré
Syntaxe de Sass
Imbriquer les règles Les variables Réutiliser son code à l'aide des mixins Découper sa feuille de styles en plusieurs fichiers Développer avec Sass : des projets à la sauce DRY
Les pièges à éviter
Syndrome de l'imbrication aiguë Portée des variables Une fonction en cache une autre
Factorisation avancée
Factoriser les styles avec @extend Maîtriser la factorisation de styles avec les placeholders
Penser modulaire
Présentation de SMACSS et de BEM Quels intérêts pour mes projets ? SMACSS appliqué à Sass BEM appliqué à Sass
Les pièges à éviter
Cas des héritages complexes Factorisation vs cascade CSS
Présentation de Compass
Un framework CSS3 pour Sass Alternative(s)
Installation de Compass
Installation depuis l'invite de commande Premier projet Compass
Configuration de Compass
Compass centralise la configuration du projet Sass
Les sprites CSS
Qu'est-ce qu'un sprite CSS ? Démystifier la sprite map Paramétrer une sprite map Maîtriser les sélecteurs Des sprites aux petits oignons
Gérer un projet Compass
Problèmes rencontrés Présentation du gestionnaire de paquets Bundler Vie d'un projet géré par Bundler Travailler en équipe avec Bundler
Déboguer un projet Sass
Exploiter les informations de débogage de Sass À la découverte de Source Maps
Travaux pratiques
TRAVAUX PRATIQUES :Alternance de présentation magistrale (50%) et d'illustrations et exercices pratiques (50%). Un support de cours sera remis à chaque participant au format papier, ainsi que les codes sources utilisés pour les exercices.
1 j
Web - Digital
LESS et SASS2 j
Web - Digital
Google Web Designer1 j
Web - Digital
Préparation à la certification Développeur HTML 5, JavaScript et CSS 3 (Cours Dédié Uniquement Action Collective Fafiec)2 j
Web - Digital
HTML, CSS : L'essentiel
1 j
Web - Digital
LESS et SASS2 j
Web - Digital
Google Web Designer1 j
Web - Digital
Préparation à la certification Développeur HTML 5, JavaScript et CSS 3 (Cours Dédié Uniquement Action Collective Fafiec)2 j
Web - Digital
HTML, CSS : L'essentiel
Des questions ?
ON VOUS RAPPELLE