CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez le préprocesseur CSS : SASS

Détails de la leçon

Description de la leçon

Dans cette leçon, nous apprendrons à utiliser SASS et Compass pour créer des thèmes WordPress. Le processus commence par la création d'un nouveau thème à l'aide de la commande compass create. Nous explorerons comment configurer les répertoires, nommer correctement les fichiers et personnaliser le fichier config.rb pour refléter ces modifications. Ensuite, nous découvrirons comment organiser nos fichiers SASS avec des partials, comment les importer dans notre feuille de style principale screen.css, et comment injecter cette feuille de style dans WordPress grâce à la fonction wp_enqueue_style. Enfin, nous illustrons le débogage avec les source maps et l'application de styles dynamiques grâce aux variables SASS.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à : 1. Créer un thème WordPress utilisant SASS et Compass. 2. Configurer les répertoires et fichiers nécessaires. 3. Utiliser des partials et des variables SASS efficacement.

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent une connaissance de base de WordPress, des notions de CSS et de SASS, et la familiarité avec l'utilisation de la ligne de commande.

Métiers concernés

Les professionnels concernés par ce sujet incluent des développeurs front-end, des intégrateurs web, et des designers cherchant à améliorer leurs compétences en création de thèmes WordPress.

Alternatives et ressources

Des alternatives possibles pourraient inclure l'utilisation de LESS, Stylus ou d'autres préprocesseurs CSS pour manipulation et gestion des styles.

Questions & Réponses

SASS et Compass permettent de structurer et gérer plus facilement les styles CSS, offrant une meilleure organisation, réutilisabilité et maintenabilité des feuilles de style.
Pour qu'un thème soit reconnu par WordPress, il doit au minimum contenir un index.php et une feuille de style style.css, même si celle-ci est vide.
Les Source Maps permettent d'associer le CSS compilé directement au SASS source dans les outils de développement du navigateur, facilitant ainsi le débogage en montrant les lignes d'origine du code source.