M2i Formation

Web et Mobile Design - Intégration Web et mobile / Développeur Front End

Créer des CSS dynamiques avec SASS et Compass

Présentiel

2 jours (14 heures) - CSS-DYN

(10)
Accueil  ›  Formations Multimédia  ›  Web et Mobile Design  ›  Intégration Web et mobile / Développeur Front End  ›  Créer des CSS dynamiques avec SASS et Compass

Objectifs pédagogiques

  • Optimiser la gestion des styles CSS
  • Comprendre la syntaxe de SASS et de Compass
  • Maîtriser la compilation et la création des fichiers CSS
  • Déployer une stratégie de maintenance et de réutilisabilité.

Niveau requis

Bonne connaissance de HTML et CSS.

Public concerné

Webmasters, créateurs de sites Internet, maquettistes, infographistes, responsables de communication, chefs de projet devant intervenir dans un projet de création de site Internet.

Paris Chaillot11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Paris Chaillot29/08/20191 020 € HTDates proposées dans les agences M2iRéserver

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Metz11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Mulhouse11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Nancy11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Reims11/02/20191 020 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Caen11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Évreux11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Le Havre11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Lille11/02/20191 020 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Dijon11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Grenoble11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Lyon11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Saint-Étienne11/02/20191 020 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Bordeaux11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Orléans11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Tours11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Bordeaux29/08/20191 020 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Aix-en-Provence11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Montpellier11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Sophia Antipolis11/02/20191 020 € HTDates proposées dans les agences M2iRéserver
Aix-en-Provence29/08/20191 020 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Introduction

  • Principes
  • Server-side
  • SASS et SCSS : compatibilité
  • Le framework Compass
  • Comparaison avec LESS

Installation du préprocesseur

  • Installation de Ruby
  • Installation de Compass depuis l'invite de commande
  • Compilation d’un fichier SASS en feuille de styles CSS

Principes

  • Découpage du projet
  • @import et fichiers multiples
  • Factorisation
  • Réutilisabilité
  • Optimisation, compression et minification

Syntaxe de SASS

  • DRY (Don't Repeat Yourself)
  • Imbriquer les sélecteurs
  • Les variables
  • Mixins et fonctions

Booster la factorisation

  • Extension des sélecteurs : @extend
  • Placeholders
  • Maps et convention de nom

Les sprites

  • Définition
  • Paramétrer une sprite map
  • Images en base64
  • Utilisation d’inline

Maintenir un projet SASS

  • Débogage
  • Source Maps et navigateurs