Programme de Formation Sass : Construire dynamiquement vos styles CSS
Installer l'environnement
Présentation de Sass
Différence entre Less et Sass
Dart Sass vs LibSass vs RubSass
Différence entre Sass et scss
Atelier : Installer Sass et compiler un premier fichier Utiliser les syntaxes de base Déclaration de variables
Les types de valeurs
Les opérateurs
Définir des valeurs par défaut
Les expressions SassScript
Comprendre le scope des variables
Les conditions @if et @else
Les boucles @for, @while Atelier : Utiliser les variables pour définir les couleurs d'un thème Ecrire des règles de style
Présentation de l'acronyme DRY
Les règles d'imbrications
Le sélecteur parent "&"
Les combinateurs
Utiliser les interpolations de chaine
Imbrication de propriété
Atelier : Mettre en forme une barre de navigation Utiliser les mixins
Déclarer une mixin (@mixin)
Inclure une mixin dans une classe (@include)
Définir des arguments (optionel, obligatoire, nommé)
Transmettre une liste de valeur
Utiliser le bloc de contenu (@content)
Atelier : Utiliser les mixins pour créer une grille responsive Exploiter des collections
Présentation
Différence entre list et map
Parcourirs les valeurs à l'aide de @each
Manipuler les valeurs avec les modules sass:map et sass:list
Atelier : Utiliser les maps pour décliner un composant css dans plusieurs couleurs ou en plusieurs tailles Utiliser les fonctions
Déclarer et utiliser une fonction (@function)
Définir des arguments (optionels, obligatoires, nommés)
Transmettre une liste de valeur
Retourner des valeurs (@return)
Différence entre les fonctions et les mixins
Atelier : Recréer la fonction calc() de css Factoriser le code
Découper son code dans plusieurs fichiers: les _partials
Importer des partials avec @import
Utiliser @import pour importer des fichiers css
Les placeholder
Etendre les selecteurs @extend
Différence entre @extend et @mixin
Atelier : Répartir notre code dans plusieurs fichiers dédiés Créer des modules
Les modules Sass : color, list, map, etc
Présentation de la règle @use
Charger un module
Les règles de nommage
Rendre des propriétés privées
Configurer les variables à l'import
Atelier : Importer et paramètrer un module