Sass, Compass et Less, simplifier la création et la maintenance de vos CSS, 2 jours (réf. SSC)

PROGRAMME DE FORMATION » Pourquoi les préprocesseurs CSS ? Rappels de syntaxe CSS. Les difficultés du métier d'intégrateur web. Les préprocesseurs : à quoi ça sert ? L'approche DRY. Les principaux préprocesseurs. » Sass, les bases Présentation et objectifs. Mise en place de l'environnement de développement. Les différentes syntaxes : Sass vs Scss. L'imbrication, les variables et les sélecteurs. Les conditions, boucles et fonctions mathématiques. Travaux pratiques Installer Sass. Créer une page à l'aide de Sass. Convertir une page CSS vers Sass. » Sass, utilisation avancée Les mixins et l'héritage @extend. Organisation d'un projet : partials et import. Intégrer des media queries dans Sass. Les fonctions de couleur. Générer des thèmes graphiques. Configuration avancée : livereload, compression et configuration du format de sortie. Déboguer les CSS générées. Travaux pratiques Structurer un projet complexe et mettre en place un mécanisme de thème sur un site. » L'extension Compass Présentation et apports de Compass. Installation et configuration. Les mixins CSS3 : animation, border-radius, shadow... Les sprites CSS : de la théorie à la pratique. Utilisation des fonts CSS : @font-face, icon-font. Les grilles CSS et les helpers de layout. Les principaux plug-ins et outils associés. Travaux pratiques Intégration avancée : CSS3, layout helpers, Sprites & Grid CSS. » Less Installation et configuration. Le langage et la syntaxe de base. Les variables et opérations. Les règles imbriquées, mixins et fonctions natives. Outils complémentaires. Comparaison avec Sass & Compass. Travaux pratiques Installation et configuration de Less. Portage d'un projet Sass en Less. » Bonnes pratiques et techniques avancées Idées reçues sur les bonnes pratiques d'intégration. Les pièges à éviter (inception, portée des variables...). Conventions de codes et CSS modulaires : les guides SMACSS, BEM... CSS hautes performances et postprocesseurs. Workflow et travail en équipe. Optimisations. Travaux pratiques Application de la méthodologie SMACCS. Optimiser le code et le temps de chargement/rendu.