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