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 allons explorer comment SASS peut aider à organiser vos projets CSS. Pour des projets d'envergure, la feuille de style principale peut facilement contenir plusieurs milliers de lignes, compliquant ainsi la maintenance et la lecture. Nous verrons comment segmenter votre CSS en plusieurs fichiers tels que header.css, footer.css, et navigation.css, puis les importer dans un fichier central comme screen.css. La pratique recommandée consiste à utiliser des partials avec des fichiers préfixés par un underscore, ce qui indique à SASS de les inclure automatiquement lors de la compilation. Par exemple, le fichier _variable.scss sera directement intégré dans le fichier compilé, tandis que footer.scss sera généré comme un fichier séparé. Vous apprendrez également comment gérer les importations sans réécrire les extensions de fichiers, rendant le processus plus agile et moins sujet à erreurs.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Montrer comment SASS peut structurer vos feuilles de style CSS
  • Expliquer l'utilisation des partials
  • Démontrer l'importation et la compilation de fichiers SASS

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en CSS et en préprocesseurs CSS comme SASS.

Métiers concernés

Les connaissances en SASS sont particulièrement utiles pour les métiers suivants :

  • Développeur Front-End
  • Intégrateur Web
  • Designer Web

Alternatives et ressources

En alternative à SASS, vous pourriez envisager d'utiliser d'autres préprocesseurs tels que LESS ou Stylus.

Questions & Réponses

Les partials en SASS permettent de segmenter la feuille de style, facilitant la maintenance et la réutilisation du code.
Les fichiers SASS partiels doivent être préfixés par un underscore (_).
Un fichier avec un underscore est inclus dans d'autres fichiers lors de la compilation, tandis qu'un fichier sans underscore sera compilé comme fichier CSS séparé.