{{tag>cours dev développement web css sass html}}



====== Simplifiez vous le CSS avec Sass ======

Notes et transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sass-1#table-of-content|Simplifiez vous le CSS avec Sass]] proposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].

Prérequis : voir le cours [[cours:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3:000_start|Créez votre site web avec HTML5 et CSS3]].

Avec le temps, vos projets grossissent, tout s’entasse et un beau jour on regrette amèrement de ne pas avoir pris le temps de réfléchir à l'organisation et la structure des fichiers HTML/CSS. On aurait gagné du temps aussi bien dans la rédaction que dans la mise en œuvre ou la maintenance.


Le cours propose de répondre aux trois problématiques suivantes :

  * Comment écrire du CSS qui soit clair, organisé et surtout bien structuré ?
  * Comment s’assurer que le code est maintenable ?
  * Comment coder plus vite et de manière plus efficace ?

Ce cours se décompose en deux parties. Avec la première vous apprendrez à structurer votre code. Nous allons commencer avec votre HTML : simplifier votre HTML est tout aussi important que de simplifier votre CSS ! Anticiper la façon de structurer votre code avant d’écrire la moindre ligne de code est très important, et cela vous fera gagner du temps par la suite.

Dans la deuxième, nous aborderons les **préprocesseurs CSS** et notamment **Sass**, afin d’optimiser notre code. De la structure à la lisibilité, en passant par l’écriture : vous saurez simplifier votre CSS, c’est certain. Nous allons aussi aborder des notions de simplification générale que vous pourrez appliquer tout au long de votre parcours professionnel, quels que soient les projets.

**Sass** est l’abréviation de **S**yntactically **A**wesome **S**tyle **S**heets (“feuilles de style syntaxiquement fantastiques”, en français). 


===== Structurez votre code =====


  * [[110_simplifier_votre_code|Simplifiez votre code]]
  * [[120_definir_les_priorites|Définissez des priorités]]
  * [[130_clarifier_html_via_bem|Clarifiez votre HTML avec BEM]]
  * [[140_utiliser_sass|Passez au niveau supérieur avec Sass]]
  * [[150_quiz_structurer_son_code|Quiz : Structurer son code]]


===== Optimisez votre CSS avec Sass =====


  * [[210_optimiser_la_lecture_du_code|Optimisez la lecture du code]]
  * [[220_utiliser_variables_et_mixins|Utilisez les variables et mixins]]
  * [[230_ameliorer_mixins_via_fonctions|Améliorez vos mixins grâce aux fonctions]]
  * [[240_adapter_code_a_tout_support|Adaptez votre code sur tous supports]]
  * [[250_deployer_code_sass|Déployez votre code Sass en ligne]]
  * [[260_quiz_optimiser_css_avec_sass|Quiz : Optimiser son CSS avec Sass]]


{{resume-css-sass.pdf|Fiche résumé du cours CSS et Sass}}