Formation au préprocesseur SASS avec le framework Compass

Simplifiez votre code pour le développement HTML5 / CSS3 grâce à la syntaxe SCSS et à l'utilisation de Mixins et Sprites avec Compass.

14 heures | 2 jours
Débutant
Dernière mise à jour : octobre 2020
Formation au préprocesseur SASS avec le framework Compass
Objectifs
  • Savoir utiliser le préprocesseur SASS
  • Connaître la syntaxe du SCSS
  • Utiliser Mixins et Sprites avec Compass
Pré-requis
  • Connaissance en HTML
  • Connaissance en CSS
Programme

Journée 1:

Introduction
  • Les avantages de SASS
  • Qu’est-ce qu’un préprocesseur CSS ?
  • Simplifiez votre code !
  • Rappel CSS
Logiciels pour développer, de quoi a-t'on besoin ?
  • Présentation de l'éditeur de code que nous allons utiliser durant la formation.
  • Installation du logiciel et des plug'in utiles.
Installer SASS
  • Télécharger SASS
  • Créer un projet SASS
  • Compilation automatique à partir du style.scss
  • Test de ma première compilation
Travaux pratique: Installation de SASS et mise en place de notre base de travailler pour développer notre premier projet.

Découverte des commandes SASS
  • Les variables
  • Le Nesting
  • Le sélecteur d'imbrication &
  • Les propriétés imbriqués
  • Les feuilles de styles Partials
  • Les extensions de classes
  • Les opérateurs mathématiques
  • Les mixins
  • Placeholder
  • Import
  • Les commentaires
Travaux pratique: Essai des différentes commandes et mise en place d’un projet.

Compilation
  • Choisir le type de sortie du fichier (normal, compressé …)
  • Bonnes pratiques

Journée 2:

Le framework Compass
  • Introduction
  • Les avantages
Installer Compass
  • Télécharger Compass
  • Créer un projet Compass
  • Compilation
Mixins
  • Qu’est-ce qu’une mixins
  • Découvertes des différentes mixins
  • Mise en place des mixins de Compass
Les sprites
  • Principe de base
  • Configuration
  • Préparation des images (:link, :hover …)
  • Obtenir un fichier unique pour stocker toutes les images
  • Génération du code css automatiquement
Travaux pratique: Mise en place d’un projet avec Compass pour utiliser les mixins et les sprites.
Formateur
Formateur Mickael
Mickael dispose d'une solide expérience front-end et notamment en référencement et graphisme. Il travail en informatique depuis plus de 15 ans. Mickael intervient également en administration système Linux et et macOS.
Autres formations qui pourraient vous intéresser
Formation Atomic Design
Dernière mise à jour : février 2019
1690 € HT
Formation Progressive Web App (PWA)
Dernière mise à jour : juin 2020
1290 € HT
Formation Responsive Web Design
Dernière mise à jour : janvier 2020
1200 € HT
Formation Wordpress, initiation à la création d'un site professionnel
1690 € HT