Apprendre le SCSS de zéro
Donne des super-pouvoirs à tes feuilles de style. Écris du CSS plus propre, plus rapide et mieux organisé à l'aide de l'imbrication, des variables de design system, des mixins réutilisables et des fonctions.
Le programme complet
12 chapitres structurés pour t'apprendre à architecturer de gros projets CSS de manière propre et maintenable.
Niveau 1
Niveau 2
Opérations
Calculez avec les couleurs et unités.
Conditions & boucles
Ajoutez de la logique à votre CSS.
Sélecteurs avancés
Maîtrisez le nesting et le &.
Placeholders
Partagez du style sans duplication.
Bonnes pratiques
Écrivez du SCSS propre et maintenable.
Compilation & outils
Optimisez votre workflow.
Conclusion
Bilan et suite du parcours.
Questions fréquentes sur le SCSS
Tout ce que tu as besoin de savoir avant d'optimiser et de structurer ton code avec Sass.
Qu'est-ce que SCSS et à quoi ça sert ?
SCSS (Sassy CSS) est un préprocesseur CSS. C'est une extension de CSS qui lui ajoute des fonctionnalités de vrai langage de programmation : des variables, de l'imbrication (nesting), des fonctions et des blocs de code réutilisables (mixins). SCSS est ensuite compilé en CSS classique lisible par les navigateurs.
Faut-il connaître le CSS classique avant d'apprendre SCSS ?
Oui, c'est indispensable. SCSS ne remplace pas le CSS, il le rend plus puissant et plus agréable à écrire. Toutes les règles de CSS classique fonctionnent en SCSS. Tu dois donc d'abord maîtriser les bases du style CSS avant de passer à SCSS.
Quelle est la différence entre Sass et SCSS ?
Sass et SCSS font partie du même projet, mais utilisent deux syntaxes différentes. La syntaxe Sass historique repose sur l'indentation et n'utilise pas d'accolades ni de points-virgules. SCSS (Sassy CSS) utilise la même syntaxe que CSS (avec accolades et points-virgules), ce qui la rend beaucoup plus facile à apprendre pour les développeurs web.
Pourquoi utiliser SCSS si Tailwind CSS existe ?
Tailwind CSS est excellent pour concevoir rapidement des interfaces avec des classes utilitaires directement dans le HTML. SCSS est quant à lui l'outil roi pour écrire du CSS sur mesure propre, structuré et modulaire. De nombreux projets modernes combinent les deux approches, ou préfèrent SCSS pour avoir un contrôle total sur leurs feuilles de style.
Prêt à architecturer tes feuilles de style ?
Mets en pratique immédiatement tes connaissances avec nos éditeurs de code et défis intégrés.
Lancer le chapitre 1 (Gratuit)