Codez dans vos feuilles de style grâce à SASS et SCSS

L'indispensable, il vous permettra d'aller plus vite dans toutes vos feuilles de style

Louis-Nicolas Leuillet
Dernière mise à jour : 10/2020
Codez dans vos feuilles de style grâce à SASS et SCSS

Présentation

Vous êtes-vous déjà senti dépassé par les limites de CSS et par la répétition constante des mêmes propriétés dans vos feuilles de style ?

Vous voulez passer au niveau supérieur dans le développement de sites internet ?

Vous recherchez une nouvelle façon, d’agrandir votre productivité ?

Vous êtes au bon endroit !

Comment va se passer la formation ?

À chaque nouvelle notion, je vais vous présenter :

  • Qu’est-ce que cette notion

  • Pourquoi nous l’apprenons

  • Comment nous pouvons l’utiliser

  • Puis nous nous exercerons

Le but de Sass est de vous faire gagner du temps et de l'énergie lors de la conception de sites Web et d'applications.

Commençons tout de suite !

Plan du cours

  • Partie 1 - Introduction

    • 1. Bienvenue dans ce cours !
    • 2. Qu'est-ce qui ne va pas avec CSS ?
    • 3. Qu'est-ce que Sass ? Et SCSS ?
  • Partie 2 - Initialisons notre premier projet

    • 4. Installons Sass sur notre ordinateur
    • 5. [Note] Si vous êtes sur Mac ou Linux
    • 6. [Facultatif] La petite histoire de Ruby
    • 7. La structure de nos projets
  • Partie 3 - Lançons-nous dans le grand bain

    • 8. Générer notre première feuille de style CSS
    • 9. Créons notre première variable
    • 10. [Facultatif] Utiliser Visual Studio Code en "live server"
    • 11. Ajouter des commentaires
    • 12. Faire des opérations mathématiques
    • 13. Récapitulatif sur les opérations
  • Partie 4 - Poussons Sass à son maximum

    • 14. Qu'est-ce que l'imbrication ?
    • 15. L'imbrication des propriétés (nesting)
    • 16. Le rôle de l'opérateur &
    • 17. L'importation et les "partials"
    • 18. Regrouper toutes les variables
    • 19. L'héritage
    • 20. Les mixins
  • Partie 5 - Entraînons-nous sur ce que nous avons vu

    • 21. Exercice : Un mixin pour Google Fonts
    • 22. Exercice - Correction
  • Partie 6 - Les fonctions

    • 23. Qu'est-ce qu'une fonction ?
    • 24. Les fonctions natives
    • 25. Et si on concevait nos propres fonctions ?
  • Partie 7 - Les conditions et les boucles

    • 26. Qu'est-ce qu'une condition ?
    • 27. Utilisons @if, @else if et @else
    • 28. Récapitulatif sur les conditions
    • 29. Qu'est-ce qu'une boucle ?
    • 30. Concevons des boucles avec @for
    • 31. Les boucles @each
    • 32. Et les boucles @while
  • Partie 8 - Entraînons-nous sur les boucles

    • 33. Exercice 1 : Ce que vous devez faire
    • 34. Exercice 1 : Correction
    • 35. Exercice 2 : Ce que vous devez faire
    • 36. Exercice 2 : Correction
    • 37. Exercice 3 : Ce que vous devez faire
    • 38. Exercice 3 : Correction
  • Partie 9 - Quelques astuces très utiles

    • 39. Les listes
    • 40. Utiliser la fonction "nth"
    • 41. Ajouter des valeurs à une liste dynamiquement
    • 42. At-root
    • 43. Maps
  • Partie 10 - Projet : Un générateur de couleurs

    • 44. Ce que nous allons faire
    • 45. Etape 1 : Créer le map
    • 46. Etape 2 : Boucler sur le map avec @each
    • 47. Correction
  • Partie 11 - Conclusion

    • 48. Conclusion

17 €

Accès immédiat et illimité
Disponible depuis partout : ordinateur, smartphone, tablette
Contenus vidéos en Full HD
Certificat de fin de formation