Less et Sass - Rentabiliser vos développements CSS

Jour 1

Les préprocesseurs de CSS pour faciliter la vie

• Présentation de Syntactically Awesome StyleSheets (Sass)
• Présentation de Leaner CSS (Less)
• Rentabiliser sa production avec les préprocesseurs
• Mieux organiser son code
• Comprendre la logique du préprocesseur
• Les similitudes entre les produits (assignations, etc.)
• Les raisons pour lesquelles il faut choisir
• Sass
• Less

Exemples de travaux pratiques (à titre indicatif)

• Réalisation des différentes étapes, depuis la conception jusque l'utilisation des deux langages Less et Sass

Présentation de Sass

• Introduction à Sass
• Installation de Sass
• Migrer en douceur vers Sass
• Le langage de Sass
• Les bases de Sass
• Variables, fonctions
• Structures de contrôle
• Les opérations
• Les mixins
• Composition et factorisation de styles
• Eclater vos fichiers
• Compression
• Les fonctions plus avancées de Sass

Exemples de travaux pratiques (à titre indicatif)

• Utiliser des variables pour fixer les couleurs d'un thème
• Mettre en forme des éléments visuels
• Utiliser les mixins pour créer une page responsive
• Répartir un code dans plusieurs fichiers
• Paramétrer un module

Jour 2

Présentation de Compass

• Un framework pour Sass
• Développer cross-browsers avec Compass

Exemples de travaux pratiques (à titre indicatif)

• Installation de Compass et réalisation de pages cross-browser avec Compass

Présentation de Less

• Le langage Less
• Les variables
• Les opérations
• Règles imbriquées
• Pseudo-classes
• Les mixins
• Intégration de JavaScript

Exemples de travaux pratiques (à titre indicatif)

• Utilisation de variables
• Création de mixins, définition de règles imbriquées
• Création de fonctions, altération des couleurs
• Création de plusieurs pages utilisant les possibilités de Less

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation