Formation Créer des CSS dynamiques avec Sass

Sass (Syntactically Awesome Stylesheets) est un langage dynamique de génération de feuilles de style en cascade.
Sass est un langage de description compilé en CSS. SassScript est un langage de script pouvant être utilisé à l’intérieur du code Sass.
Deux syntaxes existent. La syntaxe originale, nommée « syntaxe indentée », est proche de Haml. La nouvelle syntaxe se nomme SCSS.
Elle a un formalisme proche de CSS.
Initialement étoffé avec Compass (pratique pour les préfixes des différents navigateurs) ce dernier a fini par être abandonné par les utilisateurs.
Cette formation Créer des CSS avec Sass vous permettra de découvrir les richesses offertes par Sass pour créer des CSS dynamiques.

Objectif opérationnel :

Savoir créer des CSS dynamiques avec Sass.

Objectifs pédagogiques :

À l'issue de la formation Créer des CSS avec Sass, vous aurez acquis les connaissances et compétences nécessaires pour :

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

Public :

Cette formation Sass s'adresse aux webmasters, créateurs de sites Internet, maquettistes, infographistes, responsables de communication et chefs de projet devant intervenir dans un projet de création de site Internet.

Prérequis :

Pour suivre ce cours Sass, vous devez avoir une bonne connaissance du HTML et du CSS.

Introduction à Sass

Principes
Server-side
SASS et SCSS : compatibilité
Comparaison avec LESS

Installation du préprocesseur

Environnements de compilation
Installation de Prepros
Paramétrages
Compilation d'un fichier SASS en feuille de styles CSS
Mise en place d’autoprefixer pour la gestion des préfixes navigateurs

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
Mixin et fonctions

Booster la factorisation

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

Utilisation et mise en place de Sass

Les nouveaux framework JS (react, vuejs…)
Le module Sass

Maintenir un projet SASS

Débogage
Source Maps et navigateurs