Nos domaines de formation :

Formation Sass, Compass et Less, simplifier la création et la maintenance de vos CSS

Stage pratique
Durée : 2 jours
Réf : SSC
Prix  2018 : 1470 € H.T.
Pauses et déjeuners offerts
  • Programme
  • Participants / Prérequis
  • Intra / sur-mesure
Programme

Alors que le développement Web est aujourd'hui une véritable industrie, l'intégration HTML/CSS souffre encore de freins techniques limitant la réutilisation du code et sa maintenance. Découvrez comment les préprocesseurs CSS Sass et Less aident à gagner en productivité et à rationaliser cette étape du développement.

Objectifs pédagogiques

  • Comprendre les enjeux actuels liés à l'intégration CSS
  • Savoir identifier le préprocesseur adapté à ses besoins
  • Maîtriser les outils Sass, Compass et Less pour gagner en productivité et en maintenabilité
  • Appliquer les bonnes pratiques dans l'organisation de ses projets et dans la rédaction de feuilles de style
  • Profiter des apports de ces outils pour exploiter pleinement les fonctionnalités CSS3
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.

Participants / Prérequis

» Participants

Intégrateurs et développeurs Front-End.

» Prérequis

Bonnes connaissances de CSS. Connaissances de base en HTML.
Intra / sur-mesure
Programme standard     Programme sur-mesure
Oui / Non

Vos coordonnées

Dates de sessions

Pour vous inscrire, cliquez sur la session qui vous intéresse.
[-]
PARIS

Horaires

Les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45.
Pour les stages pratiques de 4 ou 5 jours, les sessions se terminent à 15h30 le dernier jour.